/* ============================================================
   SHALAW KOY — ATMOSPHERE LAYER
   Depth, ambient gold light, grain, gradient life. Fixes the "dead flat" feel.
   ============================================================ */

/* warmer base tokens + ambient vars (do not fight main.css, extend it) */
:root{
  --glow:rgba(79,209,232,.14);
  --glow-strong:rgba(79,209,232,.22);
  --ink-grad-a:#0c0b09;
  --ink-grad-b:#070706;
}

/* body: cool blue-black depth so near-black isn't flat */
body{
  background:
    radial-gradient(130% 80% at 50% -10%, #0b141a 0%, transparent 55%),
    linear-gradient(180deg,#080b0d 0%, #0a0a0a 40%, #070809 100%),
    var(--black);
  background-attachment:fixed;
}

/* film grain overlay — whole page, very subtle, non-interactive */
body::after{
  content:"";position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* HERO: ambient gold glow + light that breathes */
.hero::before{
  content:"";position:absolute;z-index:1;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 72% 42%, var(--glow) 0%, transparent 60%);
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.6}50%{opacity:1}}

/* hero light-sweep: a slow diagonal sheen across the portrait, once per cycle */
.hero__bg::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(232,200,119,.07) 48%,rgba(255,255,255,.05) 52%,transparent 62%);
  transform:translateX(-60%);
  animation:sweep 9s ease-in-out 2s infinite;
}
@keyframes sweep{0%{transform:translateX(-60%)}55%,100%{transform:translateX(140%)}}

/* section rhythm: alternate near-black tints so sections read as distinct planes */
#ventures,#journey,#ideas,#now,#contact{background:linear-gradient(180deg,rgba(255,255,255,.012),transparent 30%)}
#reach,#gallery,#decisions,#capital,#upcoming,#media{background:linear-gradient(180deg,rgba(79,209,232,.025),transparent 22%)}

/* kicker eyebrow: tiny gold glow so it pops */
.kicker{text-shadow:0 0 18px rgba(79,209,232,.25)}

/* gold text gets a faint glow for richness */
.hero__name .l2,.reach__big,.stat__v{text-shadow:0 0 34px rgba(79,209,232,.22)}

/* stat wall: each cell gets an inner top light */
.stat{background:linear-gradient(180deg,rgba(79,209,232,.04),transparent 40%),var(--black)}
.stat::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.4}

/* venture cards: depth + warm hover glow */
.vcard{background:linear-gradient(180deg,rgba(255,255,255,.015),transparent 50%),var(--panel);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.vcard:hover{box-shadow:inset 0 1px 0 rgba(79,209,232,.15),0 20px 50px -20px rgba(0,0,0,.8),0 0 40px -10px rgba(79,209,232,.12)}

/* gold buttons glow */
.btn--gold{box-shadow:0 8px 30px -8px rgba(79,209,232,.45)}
.btn--gold:hover{box-shadow:0 12px 40px -8px rgba(79,209,232,.6)}

/* nav scrolled: faint gold underline glow */
.nav.scrolled{box-shadow:0 1px 0 rgba(79,209,232,.08),0 10px 40px -20px rgba(0,0,0,.9)}

/* timeline node glow when current */
.tl.cur::before{box-shadow:0 0 0 4px rgba(79,209,232,.18),0 0 20px rgba(79,209,232,.4)}

/* gallery: warmer hover */
.gal a:hover img{filter:grayscale(0) contrast(1.08) saturate(1.1)}

/* section divider gold hairlines between major blocks */
.section + .section{border-block-start:1px solid rgba(79,209,232,.06)}

/* reduced motion: kill the moving light */
@media (prefers-reduced-motion:reduce){
  .hero::before,.hero__bg::before{animation:none!important}
  body::after{opacity:.04}
}

/* ---- extended content sections ---- */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-faint);border:1px solid var(--line-faint);margin-block-start:2.5rem}
@media(max-width:720px){.why-grid{grid-template-columns:1fr}}
.why-card{background:var(--panel);padding:1.8rem 1.6rem}
.why-card h3{font-family:var(--display);text-transform:uppercase;color:var(--gold);font-size:var(--s1);margin-block-end:.7rem;line-height:1}
.why-card p{font-size:.92rem;color:var(--dim);line-height:1.55}

.exp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-block-start:2.5rem}
@media(max-width:860px){.exp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.exp-grid{grid-template-columns:1fr}}
.exp-card{border-block-start:2px solid var(--gold);padding-block-start:1.2rem}
.exp-card h3{font-family:var(--display);text-transform:uppercase;font-size:var(--s1);margin-block-end:1rem}
.exp-card ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.exp-card li{font-size:.86rem;color:var(--dim);padding-inline-start:1rem;position:relative}
.exp-card li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.6em;width:4px;height:4px;background:var(--gold);border-radius:50%}

.appear{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-block-start:2rem}
@media(max-width:760px){.appear{grid-template-columns:1fr}}
.appear-col{border:1px solid var(--line-faint);background:var(--panel);padding:1.6rem 1.4rem}
.appear-col h4{font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;color:var(--gold);font-size:.82rem;margin-block-end:1rem;padding-block-end:.6rem;border-block-end:1px solid var(--line-faint)}
.appear-col ul{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.appear-col li{font-size:.86rem;color:var(--dim);line-height:1.45}

.faq{display:flex;flex-direction:column;gap:1px;background:var(--line-faint);border:1px solid var(--line-faint);margin-block-start:2rem}
.faq-item{background:var(--panel);padding:1.3rem 1.6rem}
.faq-item summary{font-family:var(--display);text-transform:uppercase;letter-spacing:.02em;font-size:var(--s1);color:var(--white);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;line-height:1.1}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--gold);font-size:1.5rem;flex:none;transition:transform .3s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{font-size:.92rem;color:var(--dim);line-height:1.6;margin-block-start:1rem;max-width:72ch}

/* ---- 3D tilt support ---- */
.vcard,.upcard{transition:box-shadow .3s var(--ease),transform .15s var(--ease)}
body.has-cursor .vcard:hover,body.has-cursor .upcard:hover{transform:none} /* JS tilt drives transform instead */
.vcard > *,.upcard > *{position:relative;z-index:1} /* content above glow span */

/* ---- tech stack chips ---- */
.stack{display:flex;flex-wrap:wrap;gap:.6rem;margin-block-start:2.5rem}
.stack__chip{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-size:.78rem;color:var(--dim);border:1px solid var(--line-faint);padding:.5rem .9rem;transition:.2s}
.stack__chip:hover{border-color:var(--gold);color:var(--gold)}

/* ---- how I work: process steps ---- */
.proc{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line-faint);border:1px solid var(--line-faint);margin-block-start:2.5rem}
@media(max-width:900px){.proc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.proc{grid-template-columns:1fr}}
.proc-step{background:var(--panel);padding:1.6rem 1.3rem}
.proc-step__n{font-family:var(--display);color:var(--gold);font-size:.9rem}
.proc-step__t{font-family:var(--display);text-transform:uppercase;font-size:var(--s1);line-height:1;margin-block:.4rem .7rem}
.proc-step__b{font-size:.84rem;color:var(--dim);line-height:1.5}
.expect{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-block-start:1.2rem}
@media(max-width:760px){.expect{grid-template-columns:1fr}}
.expect-card{border-block-start:2px solid var(--gold);padding-block-start:1.1rem}
.expect-card h3{font-family:var(--display);text-transform:uppercase;font-size:var(--s1);margin-block-end:.5rem}
.expect-card p{font-size:.88rem;color:var(--dim);line-height:1.5}

/* ---- awards grid ---- */
.awards{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-faint);border:1px solid var(--line-faint);margin-block-start:2.5rem}
@media(max-width:860px){.awards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.awards{grid-template-columns:1fr}}
.award{background:var(--panel);padding:1.6rem 1.4rem;transition:background .25s}
.award:hover{background:var(--black-3)}
.award__y{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;color:var(--gold);font-size:.74rem}
.award__t{font-family:var(--display);text-transform:uppercase;font-size:var(--s1);line-height:1;margin-block:.5rem .5rem}
.award__d{font-size:.82rem;color:var(--dim);line-height:1.45}

/* ============================================================
   HERO REDESIGN — structured editorial composition
   ============================================================ */
.hero__bg img{object-position:center 14%;filter:grayscale(.35) contrast(1.08) brightness(.92)}
/* stronger cinematic vignette: dark left for text, dark bottom for ribbon */
.hero__bg::after{background:
  linear-gradient(180deg,rgba(10,10,10,.6) 0%,rgba(10,10,10,.15) 30%,rgba(10,10,10,.8) 72%,var(--black) 100%)}
.hero__bg::before{background:linear-gradient(90deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.5) 42%,rgba(10,10,10,.05) 72%,transparent 100%)}
[dir="rtl"] .hero__bg::before{background:linear-gradient(270deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.5) 42%,rgba(10,10,10,.05) 72%,transparent 100%)}

/* faint technical grid overlay for structure */
.hero__grid{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(79,209,232,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(79,209,232,.045) 1px,transparent 1px);
  background-size:clamp(60px,8vw,120px) clamp(60px,8vw,120px);
  -webkit-mask-image:radial-gradient(120% 90% at 70% 30%,#000 25%,transparent 75%);
  mask-image:radial-gradient(120% 90% at 70% 30%,#000 25%,transparent 75%)}

/* vertical side label */
.hero__side{position:absolute;z-index:3;inset-block-start:0;inset-inline-end:clamp(.4rem,2vw,1.4rem);height:100%;display:flex;align-items:center;pointer-events:none}
.hero__side span{writing-mode:vertical-rl;font-family:var(--display);text-transform:uppercase;letter-spacing:.35em;font-size:.68rem;color:var(--faint)}
[dir="rtl"] .hero__side span{writing-mode:vertical-lr}
@media(max-width:860px){.hero__side{display:none}}

/* meta bar above name */
.hero__meta{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-block-end:1.4rem;opacity:0;transform:translateY(14px)}
.hero.lit .hero__meta{opacity:1;transform:none;transition:.7s var(--ease) .5s}
.hero__tag{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--gold);border:1px solid var(--line);padding:.4rem .8rem}
.hero__tag:nth-child(3){color:var(--dim);border-color:var(--line-faint)}
.hero__dot{color:var(--faint)}
@media(max-width:520px){.hero__tag:nth-child(3),.hero__dot{display:none}}

/* name scale: bigger, tighter */
.hero__name{font-size:clamp(4.6rem,calc(2.4rem + 11vw),13rem);line-height:.8;letter-spacing:-.03em}
.hero__name .l2{text-shadow:0 0 40px rgba(79,209,232,.3)}

/* stat ribbon — the key new element */
.hero__ribbon{display:flex;flex-wrap:wrap;gap:0;margin-block-start:2.4rem;border:1px solid var(--line-faint);background:rgba(14,13,12,.55);backdrop-filter:blur(8px);max-width:720px;opacity:0;transform:translateY(18px)}
.hero.lit .hero__ribbon{opacity:1;transform:none;transition:.8s var(--ease) 1.05s}
.hr-item{flex:1 1 0;min-width:120px;padding:1.1rem 1.3rem;border-inline-end:1px solid var(--line-faint);display:flex;flex-direction:column;gap:.2rem}
.hr-item:last-child{border-inline-end:0}
.hr-v{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,calc(1rem + 1.4vw),2.1rem);color:var(--gold);line-height:1;text-shadow:0 0 20px rgba(79,209,232,.25)}
.hr-l{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:.68rem;color:var(--dim)}
@media(max-width:620px){.hr-item{flex:1 1 50%;min-width:50%;border-block-end:1px solid var(--line-faint)}.hr-item:nth-child(2){border-inline-end:0}}

/* ecosystem bar: give it a top rule */
.hero__eco{margin-block-start:1.6rem;padding-block-start:1.4rem;border-block-start:1px solid var(--line-faint)}

/* tighten inner column so text occupies left 60% on desktop */
.hero__inner{max-width:var(--maxw)}
@media(min-width:1000px){.hero__inner .hero__name,.hero__inner .hero__pos,.hero__inner .hero__role{max-width:none}.hero__pos{max-width:38ch}}

/* hero keyword sub-line */
.hero__kw{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:clamp(.72rem,calc(.6rem + .4vw),.92rem);color:var(--gold);margin-block-start:.9rem;max-width:52ch;line-height:1.5;opacity:0;transform:translateY(16px)}
.hero.lit .hero__kw{opacity:1;transform:none;transition:.8s var(--ease) .78s}

/* ---- storytelling section ---- */
.story-sec{padding-block:clamp(5rem,11vw,10rem)}
.story-lines{display:flex;flex-direction:column;gap:clamp(.6rem,1.6vw,1.3rem)}
.story-line{font-family:var(--display);text-transform:uppercase;font-weight:600;letter-spacing:-.01em;line-height:1.02;font-size:clamp(1.5rem,calc(1rem + 3.4vw),3.6rem);color:var(--faint);max-width:22ch;transition:color .5s var(--ease)}
.story-line em{font-style:normal;color:var(--gold)}
.story-line.in{color:var(--white)}
.story-line--end{color:var(--faint);max-width:30ch}
.story-line--end.in{color:var(--gold)}
[dir="rtl"] .story-line{text-transform:none;letter-spacing:0;max-width:34ch}