/* ============================================================
   ADAYA — About Us page
   Cinematic storytelling · liquid glass · interactive philosophy
   Builds on styles.css tokens. Theme-aware (dark + light).
   ============================================================ */

/* ---------- lightweight glow cursor + magnetic ---------- */
.glow-cursor{display:none!important}
.glow-cursor--keep{position:fixed;top:0;left:0;width:26px;height:26px;border-radius:50%;z-index:9999;pointer-events:none;
  transform:translate(-50%,-50%);will-change:transform;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(34,205,241,.55),rgba(26,132,242,.18) 55%,transparent 72%);
  transition:width .25s var(--ease),height .25s var(--ease),opacity .3s var(--ease);opacity:0}
.glow-cursor.on{opacity:1}
.glow-cursor.hot{width:54px;height:54px}
[data-theme="light"] .glow-cursor{mix-blend-mode:multiply;
  background:radial-gradient(circle,rgba(26,132,242,.4),rgba(19,69,161,.14) 55%,transparent 72%)}
@media (hover:none),(pointer:coarse){.glow-cursor{display:none}}

/* ---------- generic 3D Adaya mark (shared with index) ---------- */
.about-page .core-stage{perspective:1500px}

/* ============================================================
   SECTION 1 — ABOUT HERO
   ============================================================ */
.about-hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;padding:140px clamp(20px,4vw,48px) 90px}
.about-hero .grid-floor{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb,var(--sapphire) 22%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--sapphire) 22%,transparent) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 46%,#000 0%,transparent 78%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 46%,#000 0%,transparent 78%);
  opacity:.5;transform:perspective(600px) rotateX(60deg) scale(1.4);transform-origin:50% 30%}
#aboutParticles{position:absolute;inset:0;z-index:1;pointer-events:none}
.about-hero .hero-core{position:relative;z-index:2;width:min(340px,62vw);aspect-ratio:1/1;margin-bottom:8px}
.about-hero .core-glow{width:80%;height:80%}
.about-hero .eyebrow{position:relative;z-index:3;margin-bottom:22px}
.about-hero h1{position:relative;z-index:3;font-size:clamp(2.3rem,5.2vw,4.4rem);font-weight:800;letter-spacing:-.03em;
  line-height:1.05;max-width:16ch;margin:0 auto 22px;text-wrap:balance}
.about-hero .lead{position:relative;z-index:3;max-width:600px;margin:0 auto 38px}
.about-hero .hero-cta{position:relative;z-index:3;justify-content:center}
.about-hero .scroll-hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:3;
  display:flex;align-items:center;gap:10px;font-family:"IBM Plex Mono",monospace;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.scroll-hint .mouse{width:20px;height:32px;border-radius:11px;border:1.5px solid color-mix(in srgb,var(--sky) 45%,transparent);position:relative;flex-shrink:0}
.scroll-hint .mouse::before{content:"";position:absolute;left:50%;top:6px;width:3px;height:6px;border-radius:2px;
  background:var(--sky);transform:translateX(-50%);animation:wheel 1.8s var(--ease) infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(-50%,9px)}}

/* ============================================================
   SECTION 2 — COMPANY INTRODUCTION
   ============================================================ */
.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.intro-copy h2{margin-bottom:24px}
.intro-copy .lead+.lead{margin-top:18px}
.intro-panels{display:flex;flex-direction:column;gap:18px}
.info-panel{display:flex;gap:18px;align-items:flex-start;padding:24px 26px;border-radius:var(--r-xl)}
.info-panel .ip-ico{width:50px;height:50px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--grad-cta);box-shadow:0 8px 20px rgba(26,132,242,.3)}
.info-panel .ip-ico svg{width:25px;height:25px;color:#fff}
.info-panel h4{margin-bottom:6px}
.info-panel p{font-size:.93rem;color:var(--text-2)}
.info-panel.shift{margin-left:clamp(0px,4vw,52px)}

/* ---- Who we are (reference layout: heading · body · divider · metrics) ---- */
.who-we-are .wa-head{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,6vw,90px);align-items:start}
.wa-title{font-size:clamp(2rem,4vw,3.2rem);font-weight:800;letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
.wa-head-right{padding-top:6px}
.wa-body{max-width:54ch}
.wa-body+.wa-body{margin-top:16px}

.wa-divider{height:1px;background:var(--border);margin:clamp(40px,6vh,72px) 0 clamp(34px,5vh,54px)}

.wa-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,5vw,68px)}
.wa-metric:not(:first-child){border-left:1px solid var(--border);padding-left:clamp(24px,4vw,56px)}
.wa-metric{display:flex;flex-direction:column;align-items:flex-start}
.wa-m-ico{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:22px;
  background:color-mix(in srgb,var(--sapphire) 12%,transparent);border:1px solid color-mix(in srgb,var(--sky) 28%,transparent)}
.wa-m-ico svg{width:22px;height:22px;color:var(--text-brand)}
.wa-num{font-size:clamp(2.5rem,4.6vw,3.5rem);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--text-brand);margin-bottom:14px}
.wa-num .u{font-size:.5em;font-weight:700;margin-left:1px;color:color-mix(in srgb,var(--text-brand) 78%,transparent)}
.wa-label{font-size:.98rem;line-height:1.45;color:var(--text-2);max-width:26ch;min-height:2.9em;margin-bottom:24px;text-wrap:pretty}
.wa-bar{margin-top:auto;align-self:stretch}
.wa-bar{height:5px;border-radius:999px;background:var(--border);overflow:hidden}
.wa-bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--grad-core);box-shadow:0 0 10px color-mix(in srgb,var(--sky) 40%,transparent)}
.wa-bar.in i{width:var(--w);transition:width 1.25s cubic-bezier(.22,1,.36,1)}

/* scroll-in states */
.wa-anim{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.wa-anim.in{opacity:1;transform:none}
.wa-fade{opacity:0;transition:opacity .85s var(--ease)}
.wa-fade.in{opacity:1}
.wa-metric{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.wa-metric.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .wa-anim,.wa-fade,.wa-metric{opacity:1;transform:none;transition:none}
  .wa-bar i{width:var(--w)}
}

@media (max-width:900px){
  .who-we-are .wa-head{grid-template-columns:1fr;gap:28px}
  .wa-metrics{grid-template-columns:1fr;gap:30px}
  .wa-metric:not(:first-child){border-left:0;padding-left:0;border-top:1px solid var(--border);padding-top:30px}
}

/* ============================================================
   SECTION 3 — LOGO PHILOSOPHY (interactive scroll story)
   ============================================================ */
.philosophy{position:relative;--philo-clear:460px}

.philo-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.philo-stage{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px}
.philo-core{position:relative;width:min(360px,70%);aspect-ratio:1/1}
.philo-core{perspective:1500px}
.philo-core .core-glow{display:none}

/* ---- sapphire-glass crystal mark — 3 pieces built from scratch ---- */
.adaya-mark{position:relative;z-index:2;width:92%;height:92%;display:flex;align-items:center;justify-content:center}
#philoMarkG{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  transform-origin:center;will-change:transform}
.cstack{position:relative;width:100%;height:100%;overflow:visible;
  transform-style:preserve-3d;backface-visibility:hidden}
@media (prefers-reduced-motion:no-preference){
  .cstack{animation:crystalSpin 15s ease-in-out infinite}
}
@keyframes crystalSpin{
  0%,100%{transform:rotateY(-13deg) rotateX(6deg)}
  50%{transform:rotateY(13deg) rotateX(-4deg)}
}

/* ---- sapphire-glass crystal shards ---- */
.cstack .ext  {opacity:.9}                                   /* extruded thickness */
.cstack .core {mix-blend-mode:screen;pointer-events:none}    /* frosted inner facet */
.cstack .facet{mix-blend-mode:screen;pointer-events:none}    /* bright top bevel */
.cstack .gloss{mix-blend-mode:screen;pointer-events:none}    /* specular sweep */
.cstack .rim  {fill:none;stroke:rgba(224,246,255,.7);stroke-width:.55;stroke-linejoin:round}

/* group = reveal state (ghost → lit w/ cinematic glow) */
.gw{opacity:.12;filter:saturate(.3) brightness(.62);
  transition:opacity 1s var(--ease),filter 1s var(--ease);
  transform-box:fill-box;transform-origin:center;will-change:opacity,filter,transform}

/* ---- scroll story: cumulative assembly (UNCHANGED logic) ----
   S1 → sky · S2 → + sapphire · S3 → complete logo. Soft glow on reveal. */
.philo-core.focus-sky .gw-sky,
.philo-core.focus-sapphire .gw-sky,
.philo-core.focus-sapphire .gw-sapphire,
.philo-core.focus-navy .gw-sky,
.philo-core.focus-navy .gw-sapphire,
.philo-core.focus-navy .gw-navy{opacity:1;
  filter:drop-shadow(0 4px 20px rgba(42,190,255,.55)) drop-shadow(0 1px 4px rgba(120,220,255,.5))}

/* subtle continuous float + micro-tilt per shard (parallax depth) */
@keyframes gfloatA{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-58px) rotate(.6deg)}}
@keyframes gfloatB{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(50px) rotate(-.5deg)}}
@keyframes gfloatC{0%,100%{transform:translateY(0)}50%{transform:translateY(-36px)}}
@media (prefers-reduced-motion:no-preference){
  .gw-sky{animation:gfloatA 7s ease-in-out infinite}
  .gw-sapphire{animation:gfloatB 8.5s ease-in-out infinite}
  .gw-navy{animation:gfloatC 9.5s ease-in-out infinite}
}

/* cinematic stage — deep navy field with cyan + sapphire light pools */
.philo-core::before{content:"";position:absolute;left:50%;top:44%;width:96%;height:96%;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0;
  background:
    radial-gradient(42% 40% at 62% 24%,rgba(52,205,244,.4),transparent 70%),
    radial-gradient(48% 46% at 30% 74%,rgba(26,132,242,.34),transparent 72%),
    radial-gradient(60% 58% at 50% 52%,rgba(19,69,161,.28),rgba(8,24,60,.1) 55%,transparent 75%);
  filter:blur(26px)}
.philo-core::after{content:"";position:absolute;left:50%;top:50%;width:52%;height:52%;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(150,230,255,.28),transparent 68%);
  filter:blur(14px);opacity:0;transition:opacity 1.1s var(--ease)}
.philo-core.focus::after{opacity:1}
[data-theme="light"] .philo-core::before{opacity:.55}
.philo-swatch{display:flex;gap:10px;align-items:center;font-family:"IBM Plex Mono",monospace;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.philo-swatch .sw{display:flex;gap:7px}
.philo-swatch .sw i{width:18px;height:18px;border-radius:5px;opacity:.3;transition:all .4s var(--ease)}
.philo-swatch .sw i.on{opacity:1;transform:scale(1.18);box-shadow:0 0 14px currentColor}

.philo-track{display:flex;flex-direction:column;gap:clamp(48px,9vh,120px);padding:38vh 0}
.philo-step{position:relative;padding:34px;border-radius:var(--r-xl);
  opacity:.38;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.philo-step.active{opacity:1}
.philo-step .pnum{font-family:"IBM Plex Mono",monospace;font-size:.78rem;letter-spacing:.14em;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.philo-step .pnum .chip{width:13px;height:13px;border-radius:4px}
.philo-step.s-sky .pnum .chip{background:var(--sky)}
.philo-step.s-sapphire .pnum .chip{background:var(--sapphire)}
.philo-step.s-navy .pnum .chip{background:var(--navy)}
.philo-step h3{font-size:clamp(1.5rem,2.4vw,2.1rem);margin-bottom:14px;letter-spacing:-.02em}
.philo-step .meaning{font-size:clamp(1.05rem,1.5vw,1.22rem);font-weight:600;margin-bottom:12px;color:var(--text)}
.philo-step .concept{color:var(--text-2);max-width:46ch}
.philo-final{margin-top:8px;padding:30px 34px;border-radius:var(--r-xl)}
.philo-final .overline{display:block;margin-bottom:10px}
.philo-final p{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--text);text-wrap:pretty}
.philo-final b{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ============================================================
   SECTION 4 — COMPANY HISTORY (timeline)
   ============================================================ */
.timeline{position:relative;max-width:920px;margin:0 auto;padding:10px 0}
.timeline .spine{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--sapphire) 50%,transparent) 8%,color-mix(in srgb,var(--sapphire) 50%,transparent) 92%,transparent)}
.timeline .spine-fill{position:absolute;left:50%;top:0;width:2px;transform:translateX(-50%);height:0;
  background:var(--grad-core);box-shadow:0 0 14px rgba(34,205,241,.6);transition:height .15s linear}
.tl-item{position:relative;width:50%;padding:0 44px 56px;box-sizing:border-box}
.tl-item:nth-child(odd){left:0;text-align:right}
.tl-item:nth-child(even){left:50%;text-align:left}
.tl-item .dot{position:absolute;top:6px;width:16px;height:16px;border-radius:50%;background:var(--bg);
  border:2px solid var(--sapphire);box-shadow:0 0 0 4px color-mix(in srgb,var(--sapphire) 18%,transparent);z-index:2;transition:all .4s var(--ease)}
.tl-item:nth-child(odd) .dot{right:-8px}
.tl-item:nth-child(even) .dot{left:-8px}
.tl-item.in .dot{background:var(--grad-core);border-color:transparent;box-shadow:0 0 18px rgba(34,205,241,.7)}
.tl-year{font-size:clamp(1.7rem,3vw,2.6rem);font-weight:800;letter-spacing:-.03em;line-height:1;margin-bottom:14px;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.tl-card{display:inline-block;text-align:left;padding:22px 24px;border-radius:var(--r-lg);max-width:360px}
.tl-card h4{margin-bottom:8px}
.tl-card p{font-size:.93rem;color:var(--text-2)}
.tl-card .tl-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.tl-card .tl-meta span{font-family:"IBM Plex Mono",monospace;font-size:.7rem;padding:4px 10px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--sapphire) 10%,transparent);border:1px solid var(--border);color:var(--text-2)}

/* ============================================================
   SECTION 5 — VISION & MISSION
   ============================================================ */
.vm-vision{position:relative;padding:clamp(40px,6vw,72px);border-radius:var(--r-2xl);overflow:hidden;margin-bottom:24px;text-align:center}
.vm-vision::before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;left:50%;top:-60%;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(34,205,241,.26),transparent 64%);filter:blur(34px);pointer-events:none}
.vm-vision .overline{display:block;margin-bottom:18px}
.vm-vision .vtext{position:relative;font-size:clamp(1.4rem,3vw,2.3rem);font-weight:700;letter-spacing:-.02em;line-height:1.25;
  max-width:20ch;margin:0 auto;text-wrap:balance}
.vm-vision .vtext .grad-text{font-weight:800}
.mission-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.mission-card{padding:30px 28px;border-radius:var(--r-xl);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.mission-card:hover{transform:translateY(-5px);box-shadow:var(--elev-3),0 0 30px rgba(34,205,241,.16),var(--glass-hi)}
.mission-card .mc-ico{width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;
  background:color-mix(in srgb,var(--sapphire) 14%,transparent);border:1px solid color-mix(in srgb,var(--sky) 34%,transparent);
  box-shadow:0 0 24px color-mix(in srgb,var(--sky) 22%,transparent)}
.mission-card .mc-ico svg{width:26px;height:26px;color:var(--text-brand)}
.mission-card h4{margin-bottom:10px;font-size:1.18rem}
.mission-card p{font-size:.94rem;color:var(--text-2)}

/* ============================================================
   SECTION 6 — OUR VALUES (F1RST)
   ============================================================ */
.values-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:var(--s8)}
.f1rst-badge{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 20px;border-radius:var(--r-lg);
  background:var(--glass-thin);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-border)}
.f1rst-badge span{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:1.15rem;line-height:1.1;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.values-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.value-card{position:relative;padding:28px 22px;border-radius:var(--r-xl);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.value-card::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .3s var(--ease);
  background:radial-gradient(300px 160px at 50% 0%,rgba(34,205,241,.2),transparent 70%);pointer-events:none}
.value-card:hover{transform:translateY(-8px);box-shadow:var(--elev-4),0 0 40px rgba(34,205,241,.22)}
.value-card:hover::before{opacity:1}
.value-card .vletter{font-family:"IBM Plex Mono",monospace;font-size:2.6rem;font-weight:600;line-height:1;margin-bottom:18px;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;transition:transform .3s var(--ease)}
.value-card:hover .vletter{transform:scale(1.12) translateY(-2px)}
.value-card .vword{font-size:1.18rem;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.value-card .vword em{font-style:normal;color:var(--text-brand)}
.value-card p{font-size:.86rem;color:var(--text-2)}

/* ============================================================
   SECTION 7 — MANAGEMENT TEAM
   ============================================================ */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.team-card{border-radius:var(--r-xl);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.team-card:hover{transform:translateY(-6px);box-shadow:var(--elev-4)}
.team-photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg-deep)}
.team-photo image-slot{width:100%;height:100%}
.team-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,color-mix(in srgb,var(--ink-900) 70%,transparent));pointer-events:none}
.team-body{padding:20px 22px}
.team-body .role{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-brand);margin-bottom:8px}
.team-body h4{font-size:1.18rem;margin-bottom:8px}
.team-body p{font-size:.88rem;color:var(--text-2)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .intro-grid{grid-template-columns:1fr;gap:36px}
  .info-panel.shift{margin-left:0}
  .philo-grid{display:block}
  /* Keep the mark pinned at full size, same as desktop. .philo-track is a
     plain scroll spacer sized for 4 phases — the 3 pillars plus the
     "Complete Symbol" close, which about.js treats as a 4th phase. Every
     phase (.philo-step ×3 and .philo-final) shares the exact same fixed
     slot right below the mark (--philo-clear, kept matched to the mark's
     actual size by about.js) — a sandwich: mark on top, whichever phase
     is active stacked directly beneath it, never flowing past the mark or
     stacking on top of each other. Each fades/slides in with the same
     entrance used by the F1RST values panels. */
  .philo-stage{position:sticky;top:clamp(70px,10vh,96px);height:auto}
  .philo-track{display:block;position:relative;height:calc((var(--philo-step-count,3) + 1) * 78vh)}
  .philo-step,.philo-final{
    position:fixed;
    top:var(--philo-clear,460px);
    left:0;right:0;
    max-width:var(--maxw);
    margin:0 auto;
    padding-left:clamp(20px,4vw,48px);
    padding-right:clamp(20px,4vw,48px);
    opacity:0;
    pointer-events:none;
    transform:translateY(22px);
    transition:opacity .6s var(--ease),transform .6s var(--ease);
  }
  .philo-step.active,.philo-final.show{opacity:1;pointer-events:auto;transform:none}
  .values-grid{grid-template-columns:repeat(3,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .mission-grid{grid-template-columns:1fr}
  .values-grid{grid-template-columns:1fr 1fr}
  .team-grid{grid-template-columns:1fr 1fr}
  /* timeline → single column, all left */
  .timeline .spine,.timeline .spine-fill{left:18px}
  .tl-item{width:100%;left:0!important;text-align:left!important;padding:0 0 44px 46px}
  .tl-item .dot{left:11px!important;right:auto!important}
  .tl-card{max-width:none;display:block}
}
@media (max-width:460px){
  .values-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
}