/* ═══════════════════════════════════════════════════════════
   hero.css — Funky Premium hero
═══════════════════════════════════════════════════════════ */

.hero{
  min-height:100vh;
  padding:24px;
  display:flex;
  flex-direction:column;
  position:relative;
  background:var(--bg);
  overflow:hidden;
  gap:18px;
  transition:background .6s;
}

/* ── Shader background ── */
.hero-bg{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  background:#000;transition:opacity .6s;
}
[data-theme="light"] .hero-bg{opacity:.20}
.hero-bg canvas{
  position:absolute !important;inset:0;
  width:100% !important;height:100% !important;display:block;
}
.hero-bg::before{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(ellipse at center,transparent 38%,rgba(0,0,0,.55) 100%),
    linear-gradient(180deg,rgba(0,0,0,.25) 0%,transparent 25%,transparent 75%,rgba(0,0,0,.4) 100%);
  transition:opacity .6s;
}
[data-theme="light"] .hero-bg::before{opacity:.3}
.hero-bg::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(90deg,
    transparent 0,transparent 60px,
    color-mix(in srgb,var(--c-cyan) 5%,transparent) 60px,
    color-mix(in srgb,var(--c-cyan) 5%,transparent) 61px);
  animation:slideLines 25s linear infinite;opacity:.6;
}
[data-theme="light"] .hero-bg::after{opacity:.15}
@keyframes slideLines{to{background-position:120px 0}}

/* ── Film grain ── */
.hero-grain{
  position:absolute;inset:0;pointer-events:none;opacity:.32;z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .9 0 0 0 0 .9 0 0 0 0 .85 0 0 0 .12 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grainShift .8s steps(3) infinite;transition:opacity .5s;
}
[data-theme="light"] .hero-grain{opacity:.1}
@keyframes grainShift{
  0%,100%{transform:translate(0,0)}
  33%{transform:translate(-2%,1%)}
  66%{transform:translate(1%,-2%)}
}

/* ── Glass panel with animated gradient border ── */
.hero-panel{
  position:relative;z-index:2;flex:1;
  background:var(--panel);
  backdrop-filter:blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);
  border-radius:22px;
  padding:clamp(28px,4vw,56px);
  display:flex;flex-direction:column;justify-content:space-between;
  overflow:hidden;
  box-shadow:
    0 40px 120px -20px rgba(0,0,0,.7),
    0 0 90px -30px var(--glow),
    inset 0 1px 0 rgba(255,255,255,.08);
  transition:background .6s,box-shadow .6s;
}
[data-theme="light"] .hero-panel{
  box-shadow:
    0 24px 80px -10px rgba(0,0,0,.14),
    0 0 60px -20px var(--glow),
    inset 0 1px 0 rgba(255,255,255,.6);
}
/* animated gradient ring using mask */
.hero-panel::before{
  content:'';position:absolute;inset:0;border-radius:22px;padding:1.5px;
  background:var(--grad);
  background-size:300% 300%;
  animation:gradShift 8s ease infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;z-index:4;opacity:.9;
}
/* glossy sheen sweep */
.hero-panel::after{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.12),transparent);
  transform:skewX(-18deg);
  animation:sheen 7s ease-in-out infinite;
  pointer-events:none;z-index:4;
}
@keyframes sheen{
  0%{left:-60%}
  35%,100%{left:140%}
}

/* ── Top bar ── */
.panel-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;flex-wrap:wrap;position:relative;z-index:5;
}

/* ── Logo ── */
.panel-logo{display:flex;align-items:center;cursor:none;transition:opacity .3s,filter .3s;text-decoration:none}
.panel-logo:hover{opacity:.8;filter:drop-shadow(0 0 10px var(--glow))}
.panel-logo img{height:clamp(28px,3vw,44px);width:auto;transition:opacity .3s}
.logo-dark{display:block}
.logo-light{display:none}
[data-theme="light"] .logo-dark{display:none}
[data-theme="light"] .logo-light{display:block}

/* ── Nav ── */
.panel-nav{display:flex;list-style:none;gap:clamp(16px,2.4vw,36px);align-items:center}
.panel-nav a{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--ink);padding:6px 0;position:relative;
}
.panel-nav a::before{
  content:'';display:inline-block;width:5px;height:5px;
  background:var(--accent);margin-right:8px;border-radius:50%;
  vertical-align:middle;transform:scale(0);box-shadow:0 0 8px var(--glow);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.panel-nav a:hover{color:var(--accent)}
.panel-nav a:hover::before{transform:scale(1)}

/* ── Social rail ── */
.panel-social{
  position:absolute;right:clamp(28px,4vw,56px);top:clamp(120px,14vh,200px);
  display:flex;flex-direction:column;gap:14px;z-index:5;
}
.panel-social a{
  font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--ink-dim);display:flex;align-items:center;
  gap:8px;text-decoration:none;transition:color .3s,transform .3s;
}
.panel-social a::before{content:'→';color:var(--accent);transition:transform .3s}
.panel-social a:hover{color:var(--accent);transform:translateX(4px)}
.panel-social a:hover::before{transform:translateX(2px)}

/* ── Mid content ── */
.panel-mid{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:24px 0;position:relative;z-index:5;max-width:560px;
}
.panel-eyebrow{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--ink-dim);display:flex;align-items:center;
  gap:14px;margin-bottom:18px;
}
.panel-eyebrow::before{content:'';width:24px;height:2px;background:var(--grad-soft);flex-shrink:0;border-radius:2px}
.panel-tagline{
  font-family:var(--display);font-weight:300;
  font-size:clamp(18px,2vw,28px);line-height:1.3;color:var(--ink);max-width:42ch;
}
.panel-tagline em{font-family:var(--serif);font-style:italic}
.panel-tagline em.grad-text{font-style:italic}

/* ── Brand / title block ── */
.panel-brand{
  display:flex;align-items:flex-end;gap:clamp(20px,3vw,48px);
  flex-wrap:wrap;position:relative;z-index:5;max-width:75%;
}
.panel-brand img{
  filter:drop-shadow(0 8px 30px var(--glow));
  animation:floaty 6s ease-in-out infinite;
  max-width: 80%;
}
/* Light mode: swap hero brand logo to the dark-on-light version */
[data-theme="light"] .panel-brand img{
  content:url("../../assets/logoDark.png");
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.panel-title{
  font-family:var(--display);font-weight:300;
  font-size:clamp(72px,16vw,240px);line-height:.82;letter-spacing:-.06em;
  color:var(--ink);overflow:hidden;flex:0 0 auto;
}
.panel-title>span{
  display:inline-block;transform:translateY(110%);opacity:0;
  animation:rise 1.2s cubic-bezier(.2,.8,.2,1) .3s forwards;
}
.panel-sub{
  display:flex;flex-direction:column;font-family:var(--display);font-weight:400;
  font-size:clamp(18px,1.8vw,28px);line-height:1.05;
  padding-bottom:clamp(12px,1.5vw,28px);gap:6px;opacity:0;
  animation:fadeIn .8s ease 1s forwards;
}
.panel-sub .d1{color:var(--ink-dim);font-weight:400}
.panel-sub .amp{color:var(--accent);font-family:var(--serif);font-style:italic;font-size:1.4em;line-height:.8}
.panel-sub .d2{color:var(--ink);font-weight:500;letter-spacing:.02em}
@keyframes rise{to{transform:translateY(0);opacity:1}}
@keyframes fadeIn{to{opacity:1}}

/* ── Scroll indicator ── */
.panel-scroll{
  position:absolute;bottom:clamp(28px,4vw,56px);right:clamp(28px,4vw,56px);
  font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--ink-dim);display:flex;align-items:center;
  gap:10px;z-index:5;
}
.panel-scroll-line{width:50px;height:2px;background:var(--line);position:relative;overflow:hidden;border-radius:2px}
.panel-scroll-line::after{
  content:'';position:absolute;inset:0;background:var(--grad-soft);
  animation:scrollHint 2s ease-in-out infinite;
}
@keyframes scrollHint{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ── Services strip (glossy chips) ── */
.hero-strip{
  position:relative;z-index:2;background:var(--panel);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--line);border-radius:16px;
  padding:18px clamp(20px,3vw,40px);display:flex;justify-content:space-between;
  align-items:center;gap:24px;flex-wrap:wrap;font-family:var(--mono);
  font-size:11px;text-transform:uppercase;letter-spacing:.14em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:background .6s,border-color .6s;
}
.hero-strip a,.hero-strip span{
  color:var(--ink-dim);transition:color .3s;display:flex;align-items:center;
  gap:8px;cursor:none;text-decoration:none;
}
.hero-strip a:hover{color:var(--accent)}
.hero-strip a::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--accent);opacity:.7;flex-shrink:0;box-shadow:0 0 8px var(--glow);
}
/* funky: rotate strip dot colors */
.hero-strip a:nth-child(1)::before{background:var(--c-yellow)}
.hero-strip a:nth-child(2)::before{background:var(--c-cyan)}
.hero-strip a:nth-child(3)::before{background:var(--c-pink)}
.hero-strip a:nth-child(4)::before{background:var(--c-blue)}
.hero-strip a:nth-child(5)::before{background:var(--c-green-kryp)}
.hero-strip a:nth-child(6)::before{background:var(--c-party)}

/* ── Mobile ── */
@media(max-width:768px){
  .panel-social{display:none}
  .panel-nav{display:none}
  .panel-top{justify-content:space-between}
  .panel-brand{align-items:flex-start;max-width:100%}
  .hero-strip{font-size:9px;gap:14px;padding:14px 18px}
  .hero-strip a:nth-child(n+5){display:none}
}