/* ============================================================
   Hero variant D — kinetic first view (神戸電子風)
   EN wordmark rises from below & from BEHIND the figure;
   JP headline drops in from the top.
   ============================================================ */
.heroD{
  position:relative;
  background:#0d1016;
  overflow:hidden;
}
.hd-bg{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center 40%;
  filter:brightness(1.6) saturate(1.05);
}
.heroD::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:rgba(255,255,255,.45);
}
.hd-stage{
  position:relative;z-index:1;
  max-width:1320px;margin-inline:auto;
  height:clamp(600px,92vh,960px);
  padding-top:80px;            /* clear the fixed header */
  overflow:hidden;
}

/* ---- back layer: giant EN wordmark ---- */
.hd-en{
  position:absolute;left:0;right:0;top:clamp(172px,23vh,312px);bottom:auto;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  font-family:var(--f-en);font-weight:800;line-height:.82;letter-spacing:-.025em;
  text-align:center;pointer-events:none;
}
.hd-en span{
  display:block;font-size:clamp(60px,15vw,240px);
  background:linear-gradient(90deg,#2955CB 0%,#8435DD 45%,#C01BEC 72%,#ED12F2 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  padding:0 .04em;
}

/* ---- mid layer: the figure (CSS-cropped + edge-masked) ---- */
.hd-figure{
  position:absolute;left:50%;bottom:-2%;transform:translateX(-50%);z-index:2;
  width:clamp(280px,31vw,440px);height:80%;
}
.hd-figure img{
  width:100%;height:100%;object-fit:contain;object-position:50% 100%;display:block;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.34)) drop-shadow(0 3px 8px rgba(0,0,0,.22));
}
/* soft ground shadow */
.hd-figure::after{
  content:"";position:absolute;left:50%;bottom:1%;transform:translateX(-50%);
  width:50%;height:34px;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(24,26,34,.16), transparent 70%);
  filter:blur(3px);z-index:-1;
}

/* ---- front layer: JP headline ---- */
.hd-jp{
  position:absolute;top:clamp(92px,13vh,140px);left:0;right:0;z-index:3;
  text-align:center;
}
.hd-jp img{
  display:inline-block;width:clamp(280px,46vw,640px);height:auto;
  filter:drop-shadow(0 3px 16px rgba(0,0,0,.55)) drop-shadow(0 1px 3px rgba(0,0,0,.4));
}

/* ---- CTA ---- */
.hd-cta{
  position:absolute;bottom:5%;left:0;right:0;z-index:4;
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;padding-inline:20px;
}
.heroD .hd-cta .btn-ghost{background:rgba(255,255,255,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-color:rgba(24,26,34,.18);}
.heroD .hd-cta .btn-ghost:hover{background:rgba(255,255,255,.92);}

/* ---- entrance animations (run when the variant is shown) ---- */
@keyframes hdRise{from{transform:translateY(46%);opacity:0;}to{transform:translateY(0);opacity:1;}}
@keyframes hdDrop{from{transform:translateY(-90%);opacity:0;}to{transform:translateY(0);opacity:1;}}
@keyframes hdFig{from{opacity:0;transform:translateX(-50%) translateY(7%);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
@keyframes hdFade{from{opacity:0;}to{opacity:1;}}

.heroD.active .hd-en{animation:hdRise 1.15s cubic-bezier(.16,.8,.24,1) both .12s;}
.heroD.active .hd-figure{animation:hdFig 1.05s cubic-bezier(.2,.7,.2,1) both .26s;}
.heroD.active .hd-jp{animation:hdDrop 1.0s cubic-bezier(.16,.8,.24,1) both .46s;}
.heroD.active .hd-cta{animation:hdFade .8s ease both 1s;}

@media(prefers-reduced-motion:reduce){
  .heroD.active .hd-en,.heroD.active .hd-figure,.heroD.active .hd-jp,.heroD.active .hd-cta{animation:none;}
}

/* safety: force final visible state if the entrance animation was paused */
.heroD.kin-shown .hd-en{animation:none;opacity:1;transform:none;}
.heroD.kin-shown .hd-jp{animation:none;opacity:1;transform:none;}
.heroD.kin-shown .hd-cta{animation:none;opacity:1;transform:none;}
.heroD.kin-shown .hd-figure{animation:none;opacity:1;transform:translateX(-50%);}

@media(max-width:640px){
  .hd-stage{height:clamp(540px,86vh,760px);}
  .hd-figure{width:min(72vw,360px);}
  .hd-en{bottom:14%;}
}