/* style.css  -  Filpride Index Page */
 /* View Transition section is at the TOP and is the single */
 /* source of truth for index-page transitions. */
 /* company-style.css handles company-page transitions. */

 :root {
   --bg-primary: #0a0a0c;
   --text-primary: #fcfaf2;
   --bg-secondary: #111114;
   --accent: #f26522;
   --accent-alt: #d62b1f;
   --yellow: #ffd200;
   --white: #fcfaf2;
   --ivory: #fff8f0;
   --ink: #0a0a0c;
   --muted: rgba(252, 250, 242, 0.7);
 }

 body.light-mode {
   --bg-primary: #fcfaf2;
   --text-primary: #0a0a0c;
   --bg-secondary: #f4f1ed;
   --muted: rgba(10, 10, 12, 0.7);
 }

 *,
 *::before,
 *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 img {
   max-width: 100%;
   height: auto;
 }

 html,
 body {
   width: 100%;
   margin: 0;
   padding: 0;
 }

 body {
   font-family: 'Barlow', sans-serif;
   background: var(--bg-primary);
   color: var(--text-primary);
   overflow-x: hidden;
   transition: background 1s ease, color 1s ease;
 }

 body.no-scroll {
   overflow: hidden;
 }


 /* VIEW TRANSITION - INDEX PAGE */
 /* Only ONE transition type fires from the index: */
 /* index - company  (forward: card expands left) */
 /**/
 /* The named element (company-hero) morphs the */
 /* clicked card into the company page hero. */
 /* The root transition is a fast cross-fade to */
 /* avoid fighting the named element animation. */

 @view-transition {
   navigation: auto;
 }

 /* Root: fast cross-fade - lets the named hero morph be the star */
 ::view-transition-old(root) {
   animation: 350ms ease both vt-fade-out;
 }

 ::view-transition-new(root) {
   animation: 350ms ease both vt-fade-in;
 }

 @keyframes vt-fade-out {
   to {
     opacity: 0;
   }
 }

 @keyframes vt-fade-in {
   from {
     opacity: 0;
   }
 }

 /* Named hero: card - company hero morph */
 ::view-transition-old(company-hero) {
   animation: 480ms cubic-bezier(0.4, 0, 0.2, 1) both vt-hero-out;
 }

 ::view-transition-new(company-hero) {
   animation: 480ms cubic-bezier(0.4, 0, 0.2, 1) both vt-hero-in;
 }

 @keyframes vt-hero-out {
   to {
     opacity: 0;
     transform: scale(1.05);
     filter: blur(6px);
   }
 }

 @keyframes vt-hero-in {
   from {
     opacity: 0;
     transform: scale(0.95);
     filter: blur(6px);
   }
 }


 /* DYNAMIC BACKGROUND */
 .bg-wrapper {
   position: fixed;
   inset: 0;
   z-index: -1;
   background: #000;
   pointer-events: none;
 }

 .bg-slide {
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center;
   opacity: 0;
   transition: opacity 1.5s ease-in-out;
 }

 .bg-slide.active {
   opacity: 1;
 }

 .bg-overlay {
   position: absolute;
   inset: 0;
   z-index: 1;
   background: linear-gradient(to bottom,
       rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.85) 100%);
 }


 /* LOADER */
 .loader-wrapper {
   position: fixed;
   inset: 0;
   z-index: 2000;
   background: #000;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
 }

 .loader-num {
   font-family: 'Barlow Condensed', sans-serif;
   font-size: 8rem;
   font-weight: 900;
   color: var(--white);
 }

 .loader-bar-outer {
   width: 200px;
   height: 2px;
   background: rgba(255, 255, 255, 0.1);
   margin-top: 2rem;
   overflow: hidden;
 }

 .loader-bar-inner {
   height: 100%;
   width: 0%;
   background: var(--accent);
 }


 /* CURTAIN */
 .curtain-reveal {
   position: fixed;
   inset: 0;
   z-index: 1500;
   pointer-events: none;
   display: flex;
 }

 .curtain-panel {
   flex: 1;
   background: #000;
 }

 .reveal-shapes {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .rhombus {
   position: absolute;
   width: 100px;
   height: 100px;
   background: var(--accent);
   transform: rotate(45deg);
   opacity: 0;
 }

 .rhombus-core {
   position: absolute;
   width: 60px;
   height: 60px;
   background: var(--yellow);
   transform: rotate(45deg);
   z-index: 10;
   opacity: 0;
 }


 /* CURSOR */
 .cursor-trail {
   position: fixed;
   width: 16px;
   height: 16px;
   background: var(--accent);
   border-radius: 2px;
   transform: translate(-50%, -50%) rotate(45deg);
   pointer-events: none;
   z-index: 3000;
   opacity: 0;
   mix-blend-mode: difference;
 }


 /* NAV */
 .glass-nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   padding: 2rem 4rem;
   z-index: 100;
   display: flex;
   justify-content: space-between;
   align-items: center;
   mix-blend-mode: difference;
 }

 .nav-logo-text {
   font-family: 'Barlow Condensed', sans-serif;
   font-size: 1.8rem;
   font-weight: 900;
   color: var(--white);
   text-decoration: none;
 }

 .scroll-progress {
   position: fixed;
   top: 0;
   left: 0;
   height: 3px;
   background: var(--accent);
   width: 0%;
 }


 /* PANELS */
 .panel {
   width: 100%;
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   padding: 10vh 6rem;
   transition: background-color 1s ease, background 1s ease, color 1s ease, border-color 1s ease;
 }

 .panel-content {
   max-width: 1300px;
   width: 100%;
   z-index: 2;
 }


 /* TYPOGRAPHY */
 .section-tag {
   font-family: 'DM Mono', monospace;
   font-size: 0.8rem;
   letter-spacing: 0.4em;
   text-transform: uppercase;
   color: var(--accent);
   margin-bottom: 2rem;
 }

 .big-text {
   font-family: 'Barlow Condensed', sans-serif;
   font-size: clamp(3rem, 7vw, 6rem);
   font-weight: 900;
   line-height: 0.95;
   text-transform: uppercase;
   margin-bottom: 3rem;
 }

 .hero-title {
   font-family: 'Barlow Condensed', sans-serif;
   font-size: clamp(3rem, 8vw, 6.5rem);
   font-weight: 900;
   line-height: 1;
   text-transform: uppercase;
   letter-spacing: 0.02em;
 }

 .hero-title .highlight {
   color: var(--accent);
 }

 .hero-subtitle {
   font-family: 'Barlow Condensed', sans-serif;
   font-size: 1.8rem;
   font-weight: 600;
   color: var(--yellow);
   text-transform: uppercase;
   letter-spacing: 0.15em;
   margin-top: 1.5rem;
 }

 .panel-body p {
   font-size: 1.15rem;
   line-height: 1.8;
   color: var(--muted);
   max-width: 750px;
   margin-bottom: 1.5rem;
 }


 /* HORIZONTAL SCROLL */
 .horizontal-panel {
   height: 100vh;
   overflow: hidden;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   padding: 0;
   background: transparent;
 }

 .sticky-content {
   position: absolute;
   top: 10%;
   left: 4rem;
   z-index: 10;
 }

 .horizontal-wrapper {
   display: flex;
   height: 100%;
   align-items: center;
   padding-left: 4rem;
   padding-right: 40vw;
 }


 /* STAT ITEMS */
 .panel-stats {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   margin-top: 2rem;
 }

 .stat-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 1.5rem 2.5rem;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 8px;
   cursor: pointer;
   flex-shrink: 0;
   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 .stat-connector {
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Barlow Condensed', sans-serif;
   font-size: 1.2rem;
   color: var(--accent);
   opacity: 0.6;
   padding: 0 0.5rem;
   flex-shrink: 0;
 }

 .stat-item .val {
   font-family: 'Barlow Condensed', sans-serif;
   font-size: 3.5rem;
   font-weight: 900;
   color: var(--accent);
   line-height: 1;
   transition: all 0.3s ease;
 }

 .stat-item .key {
   font-family: 'DM Mono', monospace;
   font-size: 0.75rem;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--muted);
   margin-top: 0.5rem;
   transition: all 0.3s ease;
 }

 .stat-item:hover {
   background: rgba(242, 101, 34, 0.15);
   border-color: var(--accent);
   transform: translateY(-5px) scale(1.05);
 }

 .stat-item:hover .val {
   color: var(--yellow);
   transform: scale(1.1);
 }

 .stat-item:hover .key {
   color: var(--white);
   letter-spacing: 0.25em;
 }


 /* GROUP CARDS */
 .group-card {
   min-width: 420px;
   height: 480px;
   margin-right: 3rem;
   padding: 4rem 3rem;
   border: 1px solid rgba(255, 255, 255, 0.1);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   position: relative;
   overflow: hidden;
   background: rgba(10, 10, 12, 0.85);
   transition: border-color 0.4s, opacity 0.4s;
   cursor: pointer;
 }

 .group-card-bg {
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center;
   z-index: 0;
   filter: blur(4px);
   transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1), filter 0.6s ease;
 }

 .group-card-overlay {
   position: absolute;
   inset: 0;
   z-index: 1;
   background: linear-gradient(to top,
       rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.7) 100%);
 }

 .group-card:hover .group-card-bg {
   transform: scale(1.15);
   filter: blur(0);
 }

 .group-card:hover {
   border-color: var(--accent);
   background: transparent;
 }

 .group-card .card-content {
   position: relative;
   z-index: 2;
 }

 .group-card h3 {
   font-family: 'Barlow Condensed', sans-serif;
   font-size: 2rem;
   text-transform: uppercase;
   margin-bottom: 1.2rem;
   color: var(--white);
   line-height: 1.1;
 }

 .group-card p {
   font-size: 0.95rem;
   line-height: 1.6;
   color: var(--muted);
   margin-bottom: 1.5rem;
 }

 .card-cta {
   font-family: 'Barlow Condensed', sans-serif;
   font-size: 1rem;
   font-weight: 700;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   color: var(--accent);
   opacity: 0;
   transform: translateY(8px);
   transition: opacity 0.3s ease, transform 0.3s ease;
 }

 .group-card:hover .card-cta {
   opacity: 1;
   transform: translateY(0);
 }

 .card-num {
   font-family: 'DM Mono', monospace;
   font-size: 0.75rem;
   letter-spacing: 0.3em;
   color: var(--accent);
   margin-bottom: 1.5rem;
   opacity: 0.7;
 }


 /* BRAND / WIPER PANEL */
 .brand-panel {
   padding: 20vh 6rem;
   background: var(--bg-primary);
   position: relative;
   overflow: hidden;
 }

 .wiper-overlay {
   position: absolute;
   top: -20vh;
   left: -10vw;
   width: 150vw;
   height: 200vh;
   background: var(--accent);
   z-index: 10;
   transform-origin: 0% 100%;
   transform: rotate(0deg);
   pointer-events: none;
 }

 .brand-intro {
   max-width: 900px;
   margin-top: 4rem;
   font-size: 1.25rem;
   line-height: 1.8;
   color: var(--text-primary);
   transition: color 1s ease;
 }

 .brand-intro p.lead {
   font-size: 2rem;
   line-height: 1.4;
   font-weight: 400;
   font-family: 'Barlow Condensed', sans-serif;
   margin-bottom: 1.5rem;
   text-transform: uppercase;
   color: var(--accent);
 }

 .brand-intro p {
   margin-bottom: 1.5rem;
 }

 .location-expand {
   width: 100%;
   margin-top: 4rem;
 }

 .mega-list-container {
   position: relative;
   max-height: 55vh;
   overflow: hidden;
   transition: max-height 1.2s cubic-bezier(0.85, 0, 0.15, 1);
 }

 .mega-list-container.is-expanded {
   max-height: 5000px;
 }

 .mega-list-fade {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 35vh;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   padding-bottom: 2rem;
   z-index: 5;
   cursor: pointer;
   transition: opacity 0.4s ease, transform 0.4s ease;
 }

 .mega-list-fade::before,
 .mega-list-fade::after {
   content: '';
   position: absolute;
   inset: 0;
   z-index: -1;
   pointer-events: none;
   transition: opacity 1s ease;
 }

 /* Dark Mode Gradient Mask */
 .mega-list-fade::before {
   background: linear-gradient(to top, #0a0a0c 15%, rgba(10, 10, 12, 0) 100%);
   opacity: 1;
 }

 /* Light Mode Gradient Mask */
 .mega-list-fade::after {
   background: linear-gradient(to top, #fcfaf2 15%, rgba(252, 250, 242, 0) 100%);
   opacity: 0;
 }

 body.light-mode .mega-list-fade::before {
   opacity: 0;
 }

 body.light-mode .mega-list-fade::after {
   opacity: 1;
 }

 .mega-list-container.is-expanded .mega-list-fade {
   opacity: 0;
   pointer-events: none;
   transform: translateY(20px);
 }

 .fade-trigger {
   font-family: 'Barlow Condensed', sans-serif;
   font-size: 1.5rem;
   font-weight: 800;
   text-transform: uppercase;
   color: var(--accent);
   display: flex;
   align-items: center;
   gap: 1rem;
   background: rgba(252, 250, 242, 0.6);
   padding: 1.2rem 3rem;
   border-radius: 50px;
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid rgba(10, 10, 12, 0.05);
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 .mega-list-fade:hover .fade-trigger {
   transform: translateY(-8px);
   background: var(--accent);
   color: var(--white);
   box-shadow: 0 20px 50px rgba(242, 101, 34, 0.25);
   border-color: transparent;
 }

 .fade-trigger .arrow {
   display: inline-block;
   transition: transform 0.3s ease;
 }

 .mega-list-fade:hover .fade-trigger .arrow {
   transform: translateY(4px);
 }

 .mega-list {
   list-style: none;
   width: 100%;
   border-top: 2px solid rgba(10, 10, 12, 0.1);
 }

 .mega-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 3rem 0;
   border-bottom: 2px solid rgba(10, 10, 12, 0.1);
   cursor: pointer;
   transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
   position: relative;
   overflow: hidden;
 }

 .mega-item::before {
   content: '';
   position: absolute;
   inset: 0;
   background: var(--accent);
   transform: scaleY(0);
   transform-origin: bottom;
   transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
   z-index: 0;
 }

 .mega-item:hover {
   padding: 3rem 2rem;
   border-color: transparent;
 }

 .mega-item:hover::before {
   transform: scaleY(1);
 }

 .mega-item>* {
   position: relative;
   z-index: 1;
   pointer-events: none;
 }

 .mega-city {
   font-family: 'Barlow Condensed', sans-serif;
   font-size: clamp(3rem, 7vw, 6.5rem);
   font-weight: 900;
   text-transform: uppercase;
   line-height: 0.9;
   color: var(--ink);
   transition: color 0.4s ease;
 }

 .mega-item:hover .mega-city {
   color: var(--white);
 }

 .mega-province {
   font-family: 'DM Mono', monospace;
   font-size: 1rem;
   letter-spacing: 0.3em;
   text-transform: uppercase;
   color: var(--muted);
   transition: color 0.4s ease;
 }

 .mega-item:hover .mega-province {
   color: var(--yellow);
 }

 .green-panel .big-text,
 .green-panel .panel-body p,
 .green-panel .section-tag {
   color: var(--white) !important;
 }


 /* HISTORY TIMELINE */
 .history-panel {
   padding: 15vh 6vw;
   background: var(--bg-primary);
   min-height: 100vh;
 }

 .timeline-grid {
   display: grid;
   grid-template-columns: 4fr 6fr;
   gap: 4rem;
   margin-top: 10vh;
   position: relative;
 }

 .timeline-left {
   position: relative;
 }

 .sticky-year-container {
   position: sticky;
   top: 40vh;
   display: flex;
   align-items: center;
 }

 .massive-year {
   font-family: 'Barlow Condensed', sans-serif;
   font-size: clamp(8rem, 16vw, 15rem);
   font-weight: 900;
   color: var(--accent);
   line-height: 0.8;
   letter-spacing: -0.02em;
   opacity: 0.15;
   transition: opacity 0.4s ease;
 }

 .timeline-right {
   display: flex;
   flex-direction: column;
   padding-bottom: 20vh;
   border-left: 2px solid rgba(255, 255, 255, 0.05);
   /* Static base line */
   position: relative;
 }

 .timeline-event {
   padding: 18vh 0;
   padding-left: 5rem;
   position: relative;
   opacity: 0.2;
   transition: opacity 0.6s ease;
 }

 /* Horizontal transform applied to text content only, leaving the divider static */
 .timeline-event>* {
   transform: translateX(40px);
   transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
 }

 .timeline-event.is-active {
   opacity: 1;
 }

 .timeline-event.is-active>* {
   transform: translateX(0);
 }

 /* Lit line segment overlay */
 .timeline-event::after {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   left: -2px;
   /* Overlaps the static container border */
   width: 2px;
   background: var(--accent);
   opacity: 0;
   transition: opacity 0.6s ease;
   z-index: 1;
 }

 .timeline-event.is-active::after {
   opacity: 1;
   box-shadow: 0 0 15px var(--accent);
 }

 .timeline-event::before {
   content: '';
   position: absolute;
   top: 18vh;
   left: -8px;
   /* Offset the 2px border and center a 14px dot */
   width: 14px;
   height: 14px;
   background: var(--bg-primary);
   border: 2px solid var(--accent);
   border-radius: 50%;
   transform: translateY(12px);
   transition: all 0.6s ease;
   z-index: 2;
 }

 .timeline-event.is-active::before {
   background: var(--accent);
   box-shadow: 0 0 20px var(--accent);
 }

 .event-title {
   font-family: 'Barlow Condensed', sans-serif;
   font-size: clamp(2.5rem, 4vw, 3.5rem);
   font-weight: 800;
   text-transform: uppercase;
   margin-bottom: 1.5rem;
   color: var(--white);
   line-height: 1.1;
 }

 .event-desc {
   font-size: 1.25rem;
   line-height: 1.8;
   color: var(--muted);
   max-width: 600px;
 }


 /* CONTACT / FOOTER */
 .footer-expanded {
   display: grid;
   grid-template-columns: 1.2fr 1.5fr 1fr;
   gap: 8rem;
   margin-top: 5rem;
 }

 .cta-link {
   font-family: 'Barlow Condensed', sans-serif;
   font-size: 2.5rem;
   font-weight: 900;
   color: var(--accent);
   text-decoration: none;
   border-bottom: 4px solid var(--accent);
   text-transform: uppercase;
 }


 /* RESPONSIVE */
 @media (max-width: 1100px) {
   .footer-expanded {
     grid-template-columns: 1fr;
     gap: 4rem;
   }

   .timeline-grid {
     grid-template-columns: 1fr;
     gap: 2rem;
     margin-top: 5vh;
   }

   .sticky-year-container {
     position: static;
     top: auto;
   }

   .massive-year {
     font-size: clamp(6rem, 25vw, 15rem);
     opacity: 0.25;
   }

   .timeline-right {
     padding-bottom: 5vh;
   }

   .timeline-event {
     padding: 8vh 0 8vh 3.5rem;
   }

   .timeline-event::before {
     top: 8vh;
     /* Match the new padding */
   }
 }

 @media (max-width: 768px) {
   .mega-item {
     flex-direction: column;
     align-items: flex-start;
     padding: 2rem 0;
   }

   .mega-item:hover {
     padding: 2rem 1.5rem;
   }

   .mega-province {
     margin-top: 0.75rem;
   }
 }

 @media (max-width: 900px) {
   .panel-stats {
     flex-direction: column;
     align-items: stretch;
   }

   .stat-connector {
     display: none;
   }

   .stat-item:not(:last-child) {
     margin-bottom: 0.5rem;
   }

   .stat-item .val {
     font-size: 2.5rem;
   }
 }