/* ══ MINI TRANSITION — Night to Morning ══ */
  #nmt-wrap{position:fixed;inset:0;z-index:999999999;display:none;overflow:hidden;font-family:'Rubik','Segoe UI',Arial,sans-serif;color-scheme:light!important;pointer-events:none;}
  #nmt-wrap.nmt-active{display:block;pointer-events:all;}
  #nmt-sky2{position:absolute;inset:0;animation:nmtSky 1.2s cubic-bezier(0.4,0,0.2,1) forwards;}
  @keyframes nmtSky{
    0%{background:linear-gradient(180deg,#000005 0%,#01020f 20%,#020818 50%,#030d25 80%,#040e28 100%);}
    20%{background:linear-gradient(180deg,#010310 0%,#020820 20%,#041238 50%,#061845 75%,#081c50 100%);}
    45%{background:linear-gradient(180deg,#080c28 0%,#0d1840 15%,#142560 28%,#6b3a6e 60%,#c8604a 75%,#f0a030 88%,#fde080 100%);}
    75%{background:linear-gradient(180deg,#0a1f55 0%,#1a60c0 25%,#30a0d8 50%,#7ad0e8 75%,#e5f7fc 100%);}
    100%{background:linear-gradient(180deg,#d0eaf8 0%,#e8f5fc 40%,#f8fcff 80%,#ffffff 100%);}
  }
  .nmt-star{position:absolute;background:#fff;border-radius:50%;animation:nmtTwinkle ease-in-out infinite alternate;}
  @keyframes nmtTwinkle{from{opacity:0.1}to{opacity:0.9}}
  #nmt-stars-c{position:absolute;inset:0;animation:nmtStarsFade 1.2s ease forwards;}
  @keyframes nmtStarsFade{0%{opacity:1;}40%{opacity:0.7;}65%{opacity:0;}100%{opacity:0;}}
  #nmt-moon2{position:absolute;top:10%;right:20%;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 38% 38%,#fffde8,#f0e8b0,#d4c870);box-shadow:0 0 16px rgba(255,240,150,0.6),0 0 36px rgba(255,230,100,0.2);animation:nmtMoon 1.2s ease forwards;}
  @keyframes nmtMoon{0%{opacity:0.9;transform:translateY(0);}30%{opacity:0.7;transform:translateY(-8px);}55%{opacity:0;transform:translateY(-20px);}100%{opacity:0;transform:translateY(-20px);}}
  #nmt-horizon2{position:absolute;bottom:0;left:0;right:0;height:45%;pointer-events:none;opacity:0;animation:nmtHorizon 1.2s ease forwards;}
  @keyframes nmtHorizon{0%{opacity:0;}40%{opacity:1;background:radial-gradient(ellipse 80% 100% at 50% 100%,rgba(255,160,30,0.55) 0%,rgba(255,100,40,0.35) 25%,rgba(200,60,80,0.2) 45%,transparent 80%);}70%{opacity:0.5;}90%{opacity:0;}100%{opacity:0;}}
  #nmt-sun2-wrap{position:absolute;left:38%;bottom:40%;animation:nmtSunRise 1.2s cubic-bezier(0.22,1,0.36,1) forwards;opacity:0;}
  #nmt-sun2{width:50px;height:50px;border-radius:50%;background:radial-gradient(circle at 38% 38%,#fff8e0,#ffe566,#ffb300,#ff7800);box-shadow:0 0 0 8px rgba(255,200,50,0.1),0 0 50px rgba(255,200,50,0.6);animation:nmtSunGlow 1s ease-in-out infinite alternate;}
  @keyframes nmtSunGlow{from{box-shadow:0 0 0 6px rgba(255,200,50,0.1),0 0 40px rgba(255,200,50,0.45);}to{box-shadow:0 0 0 16px rgba(255,200,50,0.13),0 0 80px rgba(255,200,50,0.7),0 0 140px rgba(255,150,20,0.3);}}
  #nmt-fuji-wrap{position:absolute;bottom:0;left:0;right:0;height:58%;animation:nmtFuji 1.2s ease forwards;opacity:0;}
  @keyframes nmtFuji{0%{opacity:0;transform:translateY(20px);}25%{opacity:0.4;transform:translateY(10px);}50%{opacity:1;transform:translateY(0);}100%{opacity:1;transform:translateY(0);}}
  #nmt-bloom{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse 60% 40% at 50% 45%,rgba(255,255,255,1) 0%,rgba(255,252,240,0.95) 30%,rgba(255,248,220,0.8) 55%,rgba(255,240,200,0.4) 75%,transparent 100%);animation:nmtBloom 1.2s ease forwards;}
  @keyframes nmtBloom{0%{opacity:0;}97%{opacity:0;}99%{opacity:0.4;}100%{opacity:1;background:#ffffff;}}
  .nmt-k{position:absolute;font-family:serif;font-weight:900;pointer-events:none;user-select:none;opacity:0;animation:nmtKanji linear forwards;}
  @keyframes nmtKanji{0%{opacity:0;transform:translateY(0) rotate(0deg);}12%{opacity:1;}80%{opacity:0.6;}100%{opacity:0;transform:translateY(-80px) rotate(22deg);}}
  #nmt-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:55px;animation:nmtCenter 1.2s ease forwards;opacity:0;}
  @keyframes nmtCenter{0%{opacity:0;transform:translateY(10px);}25%{opacity:1;transform:translateY(0);}80%{opacity:1;}95%{opacity:0;}100%{opacity:0;}}
  #nmt-logo-svg{max-height:38px;max-width:80vw;width:auto;height:auto;filter:drop-shadow(0 0 14px rgba(0,188,212,0.6));animation:nmtLogoFloat 1.4s ease-in-out infinite;}
  @keyframes nmtLogoFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
  #nmt-site-name{font-size:0.78rem;font-weight:900;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.88);margin-top:7px;text-shadow:0 0 20px rgba(0,188,212,0.5);}
  #nmt-site-jp{font-size:0.6rem;color:rgba(255,255,255,0.38);letter-spacing:3px;margin-top:3px;}
  #nmt-bar-outer{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:min(240px,75vw);}
  #nmt-bar-track{height:3px;background:rgba(255,255,255,0.1);border-radius:10px;overflow:hidden;}
  #nmt-bar-fill2{height:100%;width:0;border-radius:10px;background:linear-gradient(90deg,#0097a7,#00bcd4,#7ee8f8,#ffd700);background-size:200% 100%;box-shadow:0 0 12px rgba(0,188,212,0.8);animation:nmtBar 1.1s cubic-bezier(0.4,0,0.2,1) forwards,nmtShimmer 0.9s linear infinite;}
  @keyframes nmtBar{0%{width:0%;}20%{width:15%;}45%{width:45%;}70%{width:75%;}90%{width:95%;}100%{width:100%;}}
  @keyframes nmtShimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
  #nmt-wrap.nmt-exit{animation:nmtExit 0.3s ease forwards;}
  @keyframes nmtExit{0%{opacity:1;}100%{opacity:0;}}

  body.nn-loading{overflow:hidden!important;height:100vh!important;}

  /* ══ SPLASH WRAPPER ══ */
  #nn-splash{
    position:fixed;inset:0;z-index:9999999;
    overflow:hidden;
    font-family:'Rubik','Segoe UI',Arial,sans-serif;
  }

  /* ══════════════════════════════════════════
    SKY — FULL CINEMATIC CYCLE
    Animates through 6 distinct phases:
    1. Deep black night
    2. Midnight navy
    3. Pre-dawn purple-blue
    4. Golden hour orange-pink horizon
    5. Bright morning blue
    6. Soft white-blue → pure white (homepage match)
  ══════════════════════════════════════════ */
  #nn-sky{
    position:absolute;inset:0;
    background:
      linear-gradient(180deg,
        #000005 0%,
        #01020f 20%,
        #020818 50%,
        #030d25 80%,
        #040e28 100%
      );
    animation:skyFullCycle 10s cubic-bezier(0.4,0,0.2,1) forwards;
  }
  @keyframes skyFullCycle{
    /* 0-10% — Deep black night */
    0%{
      background:linear-gradient(180deg,
        #000005 0%,#01020f 15%,#020818 40%,#030d25 70%,#040e28 100%
      );
      filter:brightness(1);
    }
    /* 10-25% — Midnight navy, stars fading */
    12%{
      background:linear-gradient(180deg,
        #010310 0%,#020820 20%,#041238 50%,#061845 75%,#081c50 100%
      );
      filter:brightness(1);
    }
    /* 25-40% — Pre-dawn, purple-blue tones */
    28%{
      background:linear-gradient(180deg,
        #060820 0%,#0a1035 18%,#10205a 38%,#1a3070 58%,
        #253878 72%,#2a3d82 85%,#1e3068 100%
      );
      filter:brightness(1);
    }
    /* 40-55% — Golden hour! Orange-pink at horizon */
    45%{
      background:linear-gradient(180deg,
        #080c28 0%,#0d1840 15%,#142560 28%,
        #1a3878 40%,#234a8a 50%,
        #6b3a6e 60%,#a04060 68%,
        #c8604a 75%,#e07838 82%,
        #f0a030 88%,#fac050 93%,
        #fde080 97%,#fff5cc 100%
      );
      filter:brightness(1);
    }
    /* 55-70% — Bright morning blue sky */
    62%{
      background:linear-gradient(180deg,
        #0a1f55 0%,#1040a0 12%,#1a60c0 25%,
        #2280d0 38%,#30a0d8 50%,
        #50bce0 62%,#7ad0e8 72%,
        #a8e0f0 82%,#cceef8 90%,
        #e5f7fc 95%,#f5fbfe 100%
      );
      filter:brightness(1.05);
    }
    /* 70-85% — Soft white-blue, approaching homepage */
    78%{
      background:linear-gradient(180deg,
        #d0eaf8 0%,#ddf0fa 20%,#e8f5fc 40%,
        #f0f9fe 60%,#f8fcff 80%,#ffffff 100%
      );
      filter:brightness(1.08);
    }
    /* 85-100% — Pure white, seamless with homepage */
    92%{
      background:linear-gradient(180deg,
        #f0f8ff 0%,#f8fbff 30%,#ffffff 60%,#ffffff 100%
      );
      filter:brightness(1.1);
    }
    100%{
      background:#ffffff;
      filter:brightness(1.1);
    }
  }

  /* ══ HORIZON COLOUR WASH (golden hour glow) ══ */
  #nn-horizon{
    position:absolute;
    bottom:0;left:0;right:0;
    height:45%;
    pointer-events:none;
    animation:horizonAnim 10s ease forwards;
    opacity:0;
  }
  @keyframes horizonAnim{
    0%  {opacity:0;}
    35% {opacity:0;}
    /* Golden hour peak */
    50% {
      opacity:1;
      background:radial-gradient(
        ellipse 80% 100% at 50% 100%,
        rgba(255,160,30,0.55) 0%,
        rgba(255,100,40,0.35) 25%,
        rgba(200,60,80,0.2)  45%,
        rgba(100,40,120,0.1) 65%,
        transparent 80%
      );
    }
    /* Fades as sky brightens */
    70% {
      opacity:0.6;
      background:radial-gradient(
        ellipse 70% 100% at 50% 100%,
        rgba(255,200,80,0.3) 0%,
        rgba(255,160,60,0.15) 35%,
        transparent 65%
      );
    }
    88%{opacity:0;}
    100%{opacity:0;}
  }

  /* ══ STARS ══ */
  #nn-stars{
    position:absolute;inset:0;
    pointer-events:none;
    animation:starsLifecycle 10s ease forwards;
  }
  @keyframes starsLifecycle{
    0%  {opacity:1;}
    /* Stars visible through midnight */
    30% {opacity:0.9;}
    /* Fade during pre-dawn */
    48% {opacity:0.2;}
    /* Gone by golden hour */
    58% {opacity:0;}
    100%{opacity:0;}
  }
  .ns-star{
    position:absolute;background:#fff;border-radius:50%;
    animation:starTwinkle ease-in-out infinite alternate;
  }
  @keyframes starTwinkle{from{opacity:0.15}to{opacity:1}}

  /* ══ MOON (fades out during dawn) ══ */
  #nn-moon{
    position:absolute;
    top:12%;right:20%;
    width:38px;height:38px;
    border-radius:50%;
    background:radial-gradient(circle at 38% 38%,#fffde8,#f0e8b0,#d4c870);
    box-shadow:0 0 18px rgba(255,240,150,0.6),0 0 40px rgba(255,230,100,0.2);
    animation:moonFade 10s ease forwards;
  }
  @keyframes moonFade{
    0%  {opacity:0.9;transform:translateY(0);}
    35% {opacity:0.7;transform:translateY(-8px);}
    52% {opacity:0;  transform:translateY(-20px);}
    100%{opacity:0;  transform:translateY(-20px);}
  }

  /* ══ SUN ══ */
  #nn-sun-wrap{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:43%;
    animation:sunFullRise 10s cubic-bezier(0.22,1,0.36,1) forwards;
    opacity:0;
  }
  @keyframes sunFullRise{
    /* Hidden during pure night */
    0%  {opacity:0;transform:translateX(-50%) translateY(100px);}
    30% {opacity:0;transform:translateX(-50%) translateY(100px);}
    /* Appears at pre-dawn, deep red/orange */
    42% {opacity:0.5;transform:translateX(-50%) translateY(50px);}
    /* Golden hour — full vivid sun */
    55% {opacity:1;transform:translateX(-50%) translateY(0);}
    /* Stays visible */
    100%{opacity:1;transform:translateX(-50%) translateY(0);}
  }
  #nn-sun{
    width:76px;height:76px;border-radius:50%;
    background:radial-gradient(circle at 38% 38%,#fff8e0,#ffe566,#ffb300,#ff7800);
    box-shadow:
      0 0 0 10px rgba(255,200,50,0.1),
      0 0 0 24px rgba(255,180,30,0.07),
      0 0 65px rgba(255,200,50,0.6),
      0 0 130px rgba(255,140,20,0.3);
    animation:sunPulseColor 10s ease forwards,sunGlow 2s ease-in-out infinite alternate;
  }
  @keyframes sunPulseColor{
    /* Deep red sunrise */
    42%{background:radial-gradient(circle at 38% 38%,#fff0d0,#ffb060,#e06020,#b04010);}
    /* Turns golden */
    58%{background:radial-gradient(circle at 38% 38%,#fffde0,#ffe566,#ffb300,#ff7800);}
    /* Turns bright yellow-white */
    80%{background:radial-gradient(circle at 38% 38%,#ffffff,#fff8d0,#ffe080,#ffc030);}
    100%{background:radial-gradient(circle at 38% 38%,#ffffff,#fffce0,#fff0a0,#ffd040);}
  }
  @keyframes sunGlow{
    from{box-shadow:0 0 0 8px rgba(255,200,50,0.1),0 0 55px rgba(255,200,50,0.45);}
    to  {box-shadow:0 0 0 20px rgba(255,200,50,0.13),0 0 100px rgba(255,200,50,0.7),0 0 180px rgba(255,150,20,0.3);}
  }

  /* Sun rays */
  #nn-rays{
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:240px;height:240px;
    animation:raysAppear 10s ease forwards;
    opacity:0;
  }
  @keyframes raysAppear{
    0%  {opacity:0;}45%{opacity:0;}
    60% {opacity:0.5;}75%{opacity:1;}
    100%{opacity:1;}
  }
  .ns-ray{
    position:absolute;top:50%;left:50%;
    width:2px;
    background:linear-gradient(to top,rgba(255,210,60,0.65),transparent);
    transform-origin:bottom center;
    border-radius:2px;
    animation:rayWave ease-in-out infinite alternate;
  }
  @keyframes rayWave{from{opacity:0.25}to{opacity:0.85}}

  /* ══ WHITE BLOOM OVERLAY (the magic seamless exit) ══ */
  #nn-white-bloom{
    position:absolute;inset:0;
    pointer-events:none;
    opacity:0;
    background:radial-gradient(
      ellipse 60% 40% at 50% 45%,
      rgba(255,255,255,1) 0%,
      rgba(255,252,240,0.95) 30%,
      rgba(255,248,220,0.8) 55%,
      rgba(255,240,200,0.4) 75%,
      transparent 100%
    );
    animation:whiteBloom 10s ease forwards;
  }
  @keyframes whiteBloom{
    0%  {opacity:0;}
    70% {opacity:0;}
    82% {opacity:0.3;}
    /* Full white flood */
    92% {opacity:1;background:#ffffff;}
    100%{opacity:1;background:#ffffff;}
  }

  /* ══ CLOUDS ══ */
  .ns-cloud{
    position:absolute;
    animation:cloudDrift linear infinite;
    opacity:0;animation-fill-mode:forwards;
    /* Clouds fade in during morning phase */
    animation-name:cloudDrift,cloudAppear;
    animation-timing-function:linear,ease;
    animation-fill-mode:forwards,forwards;
  }
  @keyframes cloudDrift{
    from{transform:translateX(0);}to{transform:translateX(-100px);}
  }
  @keyframes cloudAppear{
    0%{opacity:0;}55%{opacity:0;}70%{opacity:0.85;}100%{opacity:0.85;}
  }
  .ns-cloud-body{
    background:rgba(255,255,255,0.88);
    border-radius:50px;position:relative;
    box-shadow:0 2px 20px rgba(255,255,255,0.4);
  }

  /* ══ FLOATING KANJI ══ */
  .ns-kanji{
    position:absolute;
    font-family:serif;
    color:rgba(0,140,180,0.1);
    pointer-events:none;
    animation:kanjiFloat linear forwards;
    user-select:none;
  }
  @keyframes kanjiFloat{
    0%  {transform:translateY(0) rotate(0deg);opacity:0;}
    8%  {opacity:1;}
    92% {opacity:0.7;}
    100%{transform:translateY(-80px) rotate(20deg);opacity:0;}
  }

  /* ══ CHERRY BLOSSOM PETALS ══ */
  .ns-petal{
    position:absolute;
    border-radius:60% 0 60% 0;
    pointer-events:none;
    animation:petalDrift linear forwards;
  }
  @keyframes petalDrift{
    0%  {transform:translateY(0) rotate(0deg) translateX(0);opacity:0;}
    8%  {opacity:0.9;}85%{opacity:0.7;}
    100%{transform:translateY(100vh) rotate(540deg) translateX(60px);opacity:0;}
  }

  /* ══ MT FUJI SCENE ══ */
  #nn-fuji-wrap{
    position:absolute;
    bottom:0;left:0;right:0;height:58%;
    animation:fujiReveal 10s ease forwards;
    opacity:0;
  }
  @keyframes fujiReveal{
    0%  {opacity:0;transform:translateY(20px);}
    30% {opacity:0;transform:translateY(20px);}
    /* Appears at pre-dawn, very dark silhouette */
    40% {opacity:0.4;transform:translateY(10px);}
    /* Full colour by golden hour */
    55% {opacity:1;transform:translateY(0);}
    100%{opacity:1;transform:translateY(0);}
  }

  /* ══ CONTENT (logo + bar + message) ══ */
  #nn-content{
    position:absolute;
    bottom:clamp(40px,9vh,90px);
    left:0;right:0;
    text-align:center;
    animation:contentIn 10s ease forwards;
    opacity:0;
    z-index:30;
  }
  @keyframes contentIn{
    0%  {opacity:0;transform:translateY(16px);}
    38% {opacity:0;transform:translateY(16px);}
    52% {opacity:1;transform:translateY(0);}
    /* Fade out logo as white bloom takes over */
    82% {opacity:1;}
    94% {opacity:0;}
    100%{opacity:0;}
  }

  .ns-logo-row{
    display:flex;align-items:center;justify-content:center;
    gap:12px;margin-bottom:5px;
  }
  .ns-logo-svg{
    width:54px;height:54px;
    filter:drop-shadow(0 4px 16px rgba(0,188,212,0.5));
    animation:logoFloat 3s ease-in-out infinite;
  }
  @keyframes logoFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}

  .ns-logo-name{
    font-size:1.35rem;font-weight:900;
    color:#fff;letter-spacing:2px;
    text-shadow:0 2px 20px rgba(0,0,0,0.5),0 0 40px rgba(0,188,212,0.3);
    font-family:'Rubik',sans-serif;text-transform:uppercase;
  }
  .ns-logo-jp{
    font-size:0.76rem;color:rgba(255,255,255,0.55);
    letter-spacing:4px;margin-bottom:22px;
    text-shadow:0 1px 10px rgba(0,0,0,0.4);
  }

  /* Loading bar */
  .ns-bar-outer{width:min(260px,78vw);margin:0 auto 10px;}
  .ns-bar-track{
    height:3px;background:rgba(255,255,255,0.13);
    border-radius:10px;overflow:hidden;
  }
  .ns-bar-fill{
    height:100%;width:0%;border-radius:10px;
    background:linear-gradient(90deg,#0097a7,#00bcd4,#7ee8f8,#ffd700);
    background-size:200% 100%;
    animation:barGrow 9.5s cubic-bezier(0.4,0,0.2,1) forwards,
              barShimmer 1.5s linear infinite;
    box-shadow:0 0 12px rgba(0,188,212,0.7);
  }
  @keyframes barGrow{
    0%  {width:0%;}  10%{width:8%;}
    22% {width:20%;} 35%{width:35%;}
    48% {width:52%;} 60%{width:65%;}
    72% {width:78%;} 84%{width:89%;}
    95% {width:97%;} 100%{width:100%;}
  }
  @keyframes barShimmer{
    0%{background-position:200% 0;}100%{background-position:-200% 0;}
  }

  /* Yellow accent line */
  .ns-accent{
    width:55px;height:3px;background:#FAC300;
    border-radius:2px;margin:0 auto 11px;
    box-shadow:0 0 10px rgba(250,195,0,0.5);
  }
  .ns-msg{
    font-size:0.72rem;font-weight:600;
    color:rgba(255,255,255,0.55);
    letter-spacing:2px;text-transform:uppercase;
    height:18px;transition:opacity 0.4s ease;
  }

  /* ══ EXIT ANIMATION — butter smooth into white homepage ══ */
  #nn-splash.ns-exit{
    animation:splashExit 1.2s cubic-bezier(0.76,0,0.24,1) forwards;
    pointer-events:none;
  }
  @keyframes splashExit{
    0%  {opacity:1;}
    100%{opacity:0;}
  }
  
  

/* ─────────────────────────────────────────────────────────────
   ③ HERO SECTION ANIMATIONS
   ───────────────────────────────────────────────────────────── */

@keyframes islandFloat {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-18px); }
  100% { transform: translateY(0px); }
}

@keyframes heroPetalDrift {
  0%   { transform: translateY(-20px) rotate(0deg)   translateX(0);   opacity: 0; }
  8%   { opacity: 0.9; }
  90%  { opacity: 0.8; }
  100% { transform: translateY(105vh) rotate(480deg) translateX(60px); opacity: 0; }
}

#bt-header {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

#header-bg-2 {
  animation: islandFloat 3.5s ease-in-out infinite;
}

#nn-page-floats {
  z-index: 0;
  clip-path: none;
}

#header-bg-1, #header-bg-2 {
  z-index: 1;
  position: relative;
}

.nn-hero-petal {
  position: absolute;
  border-radius: 60% 0 60% 0;
  pointer-events: none;
  z-index: 2;
  animation: heroPetalDrift linear forwards;
}

@media (max-width: 767px) {
  #bt-header {
    height: 20rem !important;
    background-size: 160% auto !important;
    background-position: center 50% !important;
    animation: islandFloat 4s ease-in-out infinite !important;
  }
  #header-wrapper {
    align-items: flex-end !important;
    padding-bottom: 1rem !important;
  }
  #header-wrapper h1,
  #header-wrapper h1 a {
    text-align: center !important;
    font-size: 1.6rem !important;
    padding: 0.4rem 0.8rem !important;
    width: 100% !important;
    background-color: rgba(255,255,255,0.75) !important;
    border-radius: 10px !important;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  #bt-header {
    height: 20rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   ④ MOBILE 3D MODEL CURTAIN ANIMATIONS
   ───────────────────────────────────────────────────────────── */

#nn-curtain-overlay {
  position:absolute; inset:0; z-index:20;
  display:none; /* hidden on desktop */
  overflow:hidden; border-radius:18px; cursor:pointer;
  background:#e0f2fe;
}
.nn-curtain-panel {
  position:absolute; top:0; width:50%; height:100%;
  background:linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  background-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08) 2px, transparent 3px);
  background-size: 20px 20px;
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
  box-shadow: inset 0 0 30px rgba(0,0,0,0.6);
}
.nn-curtain-left { left:0; transform-origin:left; border-right:3px solid #facc15; }
.nn-curtain-right { right:0; transform-origin:right; border-left:3px solid #facc15; }

/* Curtain open animation */
#nn-curtain-overlay.open .nn-curtain-left { transform: translateX(-100%); }
#nn-curtain-overlay.open .nn-curtain-right { transform: translateX(100%); }

.nn-curtain-text {
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  text-align:center; color:#fff; z-index:21; pointer-events:none;
  transition: opacity 0.4s; text-shadow: 0 4px 10px rgba(0,0,0,0.5);
  width: 100%; padding: 0 10px;
}
#nn-curtain-overlay.open .nn-curtain-text { opacity:0; }

.nn-curtain-overlay-hint {
  animation: curtainShake 0.4s ease-in-out;
}
@keyframes curtainShake {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}