/* LL Scroll Hero v0.2.0
   One natural gesture: short pinned journey, direct scroll-linked storytelling. */
.llsh-hero{
  --llsh-header-overlap:0px;
  position:relative;
  width:100%;
  max-width:none;
  min-height:var(--llsh-height-desktop,190svh);
  margin:calc(-1 * var(--llsh-header-overlap)) 0 0 !important;
  padding:0 !important;
  z-index:0;
  overflow:clip;
  background:#02060c;
}

.llsh-hero__sticky{
  position:sticky;
  top:0;
  width:100%;
  height:100svh;
  overflow:hidden;
  background:#02060c;
}

.llsh-hero__media,
.llsh-layer,
.llsh-layer img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.llsh-layer{
  display:block;
  will-change:opacity;
  backface-visibility:hidden;
  pointer-events:none;
}

.llsh-layer img{
  display:block;
  object-fit:cover;
  object-position:center center;
  transform:translateZ(0);
}

.llsh-layer--night{opacity:1}
.llsh-layer--dawn{opacity:0}

.llsh-hero__shade{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(
    to top,
    rgba(2,6,12,.52) 0%,
    rgba(2,6,12,.26) 24%,
    rgba(2,6,12,.06) 48%,
    rgba(2,6,12,0) 70%
  );
}

.llsh-hero__content{
  position:relative;
  z-index:3;
  height:100%;
  display:flex;
  align-items:flex-end;
  box-sizing:border-box;
  padding:clamp(28px,4vw,64px);
  padding-bottom:clamp(34px,5vw,82px);
  pointer-events:none;
}

.llsh-hero.is-center .llsh-hero__content{justify-content:center;text-align:center}
.llsh-hero.is-left .llsh-hero__content{justify-content:flex-start;text-align:left}

.llsh-hero__inner{
  position:relative;
  width:min(100%,var(--llsh-text-max,34rem));
  min-height:13.5rem;
  color:#fff;
  text-shadow:0 1px 24px rgba(0,0,0,.36);
}

.llsh-copy{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  max-width:100%;
  will-change:opacity,transform;
  transform:translate3d(0,0,0);
  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
}

.llsh-copy--primary{opacity:1}

.llsh-hero__label{
  margin:0 0 .85rem;
  font-size:.76rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:.9;
  font-family:'Libre Baskerville', Georgia, serif;
}
.llsh-hero__heading{
  margin:0;
  color:#fff !important;
  font-size:clamp(2rem,5vw,4.5rem);
  line-height:1.15;
  letter-spacing:.01em;
  font-weight:500;

  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
  word-break:keep-all;
  overflow-wrap:anywhere;
}
.llsh-hero__subheading{
  margin:1rem 0 0;
  font-size:clamp(1rem,1.9vw,1.25rem);
  line-height:1.85;
  opacity:.94;
  max-width:32em;

  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
  word-break:keep-all;
  overflow-wrap:anywhere;
}
.llsh-hero__scrollcue{
  display:flex;
  align-items:center;
  gap:.9rem;
  margin-top:1.25rem;
  opacity:.82;
}
.llsh-hero__scrollline{display:block;width:44px;height:1px;background:rgba(255,255,255,.8)}
.llsh-hero__scrolltext{font-size:.72rem;letter-spacing:.18em}

@media (max-width:960px){
  .llsh-hero{min-height:var(--llsh-height-mobile,150svh)}
  .llsh-layer img{object-position:center 46%;}
  .llsh-hero__content{padding:20px 20px 28px}
  .llsh-hero__inner{min-height:11.5rem}
  .llsh-hero__label{font-size:.72rem;letter-spacing:.18em}
  .llsh-hero__heading{font-size:clamp(1.82rem,8vw,3rem)}
  .llsh-hero__subheading{font-size:.98rem;line-height:1.75;max-width:29em}
  }

@media (prefers-reduced-motion:reduce){
  .llsh-layer--night{opacity:0 !important}
  .llsh-layer--dawn{opacity:1 !important}
  .llsh-copy--primary{opacity:1 !important}
  .llsh-copy--primary{transform:none !important}
}


/* Brand statement after the image — no card, just space + type + signature. */
.llsh-brand{
  position:relative;
  width:100%;
  min-height:70svh;
  display:grid;
  place-items:center;
  box-sizing:border-box;
  padding:clamp(64px,10vw,140px) 24px;
  background:#f8f8f5;
  color:#263739;
  overflow:hidden;
}

.llsh-brand__inner{
  width:min(100%,1100px);
  margin:0 auto;
  text-align:center;
  transform:translateY(-3svh);
}

/* Wrapper remains only for reveal animation. No panel/card visuals. */
.llsh-brand__copyFrame{
  width:100%;
  margin:0 auto;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  opacity:0;
  transform:translate3d(0,14px,0);
  transition:
    opacity 1000ms cubic-bezier(.22,.61,.36,1),
    transform 1000ms cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}

.llsh-brand__copy{
  margin:0 auto;
  max-width:18em;
  font-family:'Noto Serif JP','Yu Mincho','Hiragino Mincho ProN',serif;
  font-size:clamp(2rem,4.6vw,4.65rem);
  line-height:1.30;
  letter-spacing:.024em;
  font-weight:500;
  font-feature-settings:'palt' 1;
  color:#263739;
}

.llsh-brand__line{
  display:block;
  white-space:nowrap;
}

/* Signature: approved two-log symbol on the LEFT, site name on the RIGHT. */
.llsh-brand__identity{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:.48rem;
  margin:46px auto 0;
  opacity:0;
  transform:translate3d(0,10px,0);
  transition:
    opacity 900ms cubic-bezier(.22,.61,.36,1) 220ms,
    transform 900ms cubic-bezier(.22,.61,.36,1) 220ms;
  will-change:opacity,transform;
}

.llsh-brand__symbol{
  width:22px;
  height:29px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.llsh-brand__symbolImg{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.llsh-brand__name{
  margin:0;
  font-family:'Libre Baskerville',Georgia,serif;
  font-size:.76rem;
  line-height:1.2;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:#263739;
}

.llsh-brand.is-visible .llsh-brand__copyFrame,
.llsh-brand.is-visible .llsh-brand__identity{
  opacity:1;
  transform:translate3d(0,0,0);
}

@media (max-width:960px){
  .llsh-brand{
    min-height:58svh;
    padding:56px 18px;
  }

  .llsh-brand__inner{
    transform:translateY(-2svh);
  }

  .llsh-brand__copy{
    max-width:none;
    font-size:clamp(1.82rem,7.05vw,3.05rem);
    line-height:1.30;
    letter-spacing:.014em;
  }

  .llsh-brand__identity{
    margin-top:44px;
    gap:.42rem;
  }

  .llsh-brand__symbol{
    width:20px;
    height:26px;
  }

  .llsh-brand__name{
    font-size:.68rem;
    letter-spacing:.15em;
  }
}

@media (prefers-reduced-motion:reduce){
  .llsh-brand__copyFrame,
  .llsh-brand__identity{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}


/* v0.3.2 — PC is intentionally different from mobile.
   The image is a bounded 16:9 stage, so large/4K displays gain calm negative space
   instead of stretching the source until it looks rough. */
.llsh-clouds{display:none}

@media (min-width:961px){
  .llsh-hero__sticky{
    background:
      radial-gradient(ellipse at 50% 44%, rgba(26,42,46,.52) 0%, rgba(8,17,22,.72) 52%, #02060c 82%);
  }
  .llsh-hero__media{
    inset:50% auto auto 50%;
    width:min(96vw,1672px);
    height:auto;
    max-height:92svh;
    aspect-ratio:1672/941;
    transform:translate3d(-50%,-50%,0);
    overflow:hidden;
    box-shadow:0 0 100px rgba(2,6,12,.54);
  }
  .llsh-layer img{
    object-position:center center;
  }
  .llsh-hero__shade{
    background:
      linear-gradient(to top,rgba(2,6,12,.57) 0%,rgba(2,6,12,.28) 25%,rgba(2,6,12,.05) 54%,rgba(2,6,12,.02) 100%),
      linear-gradient(90deg,rgba(2,6,12,.10) 0%,rgba(2,6,12,0) 18%,rgba(2,6,12,0) 82%,rgba(2,6,12,.10) 100%);
  }
  .llsh-hero__content{
    width:min(1360px,calc(100% - 96px));
    margin-inline:auto;
    padding-left:0;
    padding-right:0;
  }
  .llsh-hero__inner{max-width:38rem}
  .llsh-hero__heading{
    font-size:clamp(2.35rem,3.75vw,4rem);
    text-wrap:balance;
  }
  .llsh-brand{min-height:min(70svh,780px)}

  /* One-way pre-dawn → morning transition; it stops at the bright frame. */
  .llsh-hero.is-desktop-auto .llsh-layer--night{
    animation:llshPcNight 18s cubic-bezier(.22,.61,.36,1) .35s 1 both;
  }
  .llsh-hero.is-desktop-auto .llsh-layer--dawn{
    animation:llshPcDawn 18s cubic-bezier(.22,.61,.36,1) .35s 1 both;
  }

  /* Only the sky receives a tiny parallax drift. The cabin / shoreline stay stable. */
  .llsh-clouds{
    display:block;
    position:absolute;
    inset:-2% -3% auto -3%;
    height:58%;
    overflow:hidden;
    z-index:3;
    pointer-events:none;
    opacity:.46;
    mix-blend-mode:soft-light;
  }
  .llsh-clouds img{
    position:absolute;
    inset:0;
    width:106%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    will-change:transform,opacity;
    animation:llshCloudDrift 28s ease-in-out 1s infinite alternate;
  }
}

@media (min-width:1800px){
  .llsh-hero__media{width:1672px}
  .llsh-hero__content{width:1360px}
}

@media (prefers-reduced-motion:reduce){
  .llsh-hero.is-desktop-auto .llsh-layer--night{animation:none!important;opacity:0!important}
  .llsh-hero.is-desktop-auto .llsh-layer--dawn{animation:none!important;opacity:1!important}
  .llsh-clouds{display:none!important}
}

@keyframes llshPcNight{
  0%,16%{opacity:1}
  70%{opacity:.16}
  100%{opacity:0}
}
@keyframes llshPcDawn{
  0%,12%{opacity:0}
  72%{opacity:.92}
  100%{opacity:1}
}
@keyframes llshCloudDrift{
  0%{transform:translate3d(-1.6%,0,0) scale(1.035);opacity:.72}
  100%{transform:translate3d(1.6%,-.35%,0) scale(1.055);opacity:.94}
}


/* v0.3.4 — lighter PC-only video. Mobile rules are unchanged. */
.llsh-pc-video{display:none}
@media (min-width:961px){
  /* Keep the site header in its own normal flow; the hero must not pull underneath it. */
  .llsh-hero{margin:0!important}

  .llsh-pc-video{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    opacity:1;
    z-index:0;
    pointer-events:none;
    transition:none;
    background:#02060c;
  }
  .llsh-hero.has-pc-video .llsh-pc-video{opacity:1}
  .llsh-hero.has-pc-video .llsh-layer,
  .llsh-hero.has-pc-video .llsh-clouds{
    opacity:0!important;
    animation:none!important;
  }
  .llsh-hero.has-pc-video .llsh-hero__media{
    background:#02060c;
  }
}


/* v0.3.5 — PC hero uses a light looping still-image treatment.
   Trees and the building stay fixed; only clouds, light and water shimmer move.
   Mobile behavior remains unchanged. */
@media (min-width:961px){
  .llsh-hero{margin:0!important}
  .llsh-pc-video{display:none!important}

  .llsh-hero__media{
    background:#02060c;
    isolation:isolate;
  }
  .llsh-hero__media::before{
    content:"";
    position:absolute;
    inset:-2% -3% 40% -3%;
    z-index:2;
    pointer-events:none;
    background-image:url("desktop-clouds.webp");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center top;
    mix-blend-mode:soft-light;
    opacity:.42;
    will-change:transform,opacity,background-position;
    animation:llshPcCloudLoop 18s ease-in-out infinite;
  }
  .llsh-hero__media::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:
      radial-gradient(ellipse at 72% 28%, rgba(255,211,128,.18) 0%, rgba(255,211,128,.10) 18%, rgba(255,211,128,0) 48%),
      linear-gradient(180deg, rgba(255,244,220,0) 56%, rgba(255,232,179,.07) 64%, rgba(255,221,158,.14) 72%, rgba(255,255,255,.05) 78%, rgba(255,244,220,0) 88%),
      linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,246,224,.07) 50%, rgba(255,255,255,0) 100%);
    background-size:100% 100%, 140% 55%, 180% 100%;
    background-position:center center, 58% 100%, 0% 0%;
    background-repeat:no-repeat;
    mix-blend-mode:screen;
    opacity:.76;
    will-change:opacity,background-position,transform;
    animation:llshPcLightLoop 18s ease-in-out infinite;
  }

  .llsh-hero.is-desktop-auto .llsh-layer--night{
    animation:llshPcNightLoop 18s ease-in-out infinite;
  }
  .llsh-hero.is-desktop-auto .llsh-layer--dawn{
    animation:llshPcDawnLoop 18s ease-in-out infinite;
    opacity:1;
  }
}

@media (prefers-reduced-motion:reduce){
  .llsh-hero__media::before,
  .llsh-hero__media::after,
  .llsh-hero.is-desktop-auto .llsh-layer--night,
  .llsh-hero.is-desktop-auto .llsh-layer--dawn{
    animation:none!important;
  }
  .llsh-hero.is-desktop-auto .llsh-layer--night{opacity:.18!important}
  .llsh-hero.is-desktop-auto .llsh-layer--dawn{opacity:1!important}
}

@keyframes llshPcNightLoop{
  0%{opacity:.78}
  18%{opacity:.78}
  52%{opacity:.20}
  76%{opacity:.06}
  100%{opacity:.78}
}
@keyframes llshPcDawnLoop{
  0%{opacity:.92}
  18%{opacity:.92}
  52%{opacity:1}
  76%{opacity:1}
  100%{opacity:.92}
}
@keyframes llshPcCloudLoop{
  0%{transform:translate3d(-1.2%,0,0) scale(1.03); opacity:.34; background-position:46% 0%}
  50%{transform:translate3d(1.4%,-.35%,0) scale(1.05); opacity:.54; background-position:54% 2%}
  100%{transform:translate3d(-1.2%,0,0) scale(1.03); opacity:.34; background-position:46% 0%}
}
@keyframes llshPcLightLoop{
  0%{opacity:.54; background-position:center center, 42% 100%, 8% 0%}
  50%{opacity:.88; background-position:center center, 60% 100%, 52% 0%}
  100%{opacity:.54; background-position:center center, 42% 100%, 8% 0%}
}


/* v0.3.7 — PC-only cleanup.
   No sticky/pinned scroll journey on desktop. The scene moves by itself.
   Mobile rules and mobile scroll behavior are unchanged. */
@media (min-width:961px){
  .llsh-hero{
    min-height:clamp(620px,82svh,900px)!important;
    height:auto;
    margin:0!important;
    overflow:hidden;
  }
  .llsh-hero__sticky{
    position:relative!important;
    top:auto!important;
    height:clamp(620px,82svh,900px)!important;
    min-height:0!important;
    overflow:hidden;
  }

  /* There is no desktop scroll-controlled hero anymore. */
  .llsh-hero__scrollcue{display:none!important}
  .llsh-copy--primary{
    transform:none!important;
    opacity:1!important;
  }

  /* Keep the building and trees perfectly still. */
  .llsh-layer img{
    transform:none!important;
    animation:none!important;
  }

  /* More visible but still quiet morning cycle. */
  .llsh-hero.is-desktop-auto .llsh-layer--night{
    animation:llshPcNightLoop37 14s ease-in-out infinite!important;
  }
  .llsh-hero.is-desktop-auto .llsh-layer--dawn{
    animation:llshPcDawnLoop37 14s ease-in-out infinite!important;
  }

  /* Cloud motion: clearly readable at normal desktop viewing distance. */
  .llsh-hero__media::before{
    inset:-4% -8% 43% -8%;
    opacity:.56;
    mix-blend-mode:soft-light;
    animation:llshPcCloudLoop37 14s ease-in-out infinite!important;
  }

  /* Sun glow + moving reflection across the water. */
  .llsh-hero__media::after{
    background:
      radial-gradient(circle at 72% 26%,
        rgba(255,220,151,.28) 0%,
        rgba(255,220,151,.16) 10%,
        rgba(255,220,151,0) 34%),
      linear-gradient(104deg,
        rgba(255,255,255,0) 27%,
        rgba(255,235,190,.04) 40%,
        rgba(255,226,165,.22) 49%,
        rgba(255,246,220,.08) 57%,
        rgba(255,255,255,0) 70%),
      repeating-linear-gradient(176deg,
        rgba(255,238,201,0) 0 7px,
        rgba(255,238,201,.07) 8px 9px,
        rgba(255,238,201,0) 10px 18px);
    background-size:100% 100%, 170% 48%, 100% 31%;
    background-position:center center, -35% 100%, center 100%;
    background-repeat:no-repeat;
    opacity:.78;
    mix-blend-mode:screen;
    animation:llshPcWaterLightLoop37 14s ease-in-out infinite!important;
  }
}

@keyframes llshPcNightLoop37{
  0%,100%{opacity:.52}
  46%,58%{opacity:.12}
}
@keyframes llshPcDawnLoop37{
  0%,100%{opacity:.94}
  46%,58%{opacity:1}
}
@keyframes llshPcCloudLoop37{
  0%,100%{
    transform:translate3d(-3.2%,0,0) scale(1.04);
    background-position:43% 0%;
    opacity:.44;
  }
  50%{
    transform:translate3d(3.2%,-.6%,0) scale(1.055);
    background-position:57% 2%;
    opacity:.68;
  }
}
@keyframes llshPcWaterLightLoop37{
  0%,100%{
    opacity:.56;
    background-position:center center,-35% 100%,center 100%;
  }
  50%{
    opacity:.90;
    background-position:center center,95% 100%,center 98%;
  }
}

@media (min-width:1800px){
  .llsh-hero,
  .llsh-hero__sticky{
    min-height:760px!important;
    height:min(82svh,900px)!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .llsh-hero.is-desktop-auto .llsh-layer--night,
  .llsh-hero.is-desktop-auto .llsh-layer--dawn,
  .llsh-hero__media::before,
  .llsh-hero__media::after{
    animation:none!important;
  }
}


/* v0.3.8 — PC-only hero heading line-break fix.
   Keep 「へ。」 attached to the second line. Mobile remains unchanged. */
.llsh-hero__heading-line{display:inline}
@media (min-width:961px){
  .llsh-hero__inner{
    width:min(100%,46rem);
    max-width:46rem;
  }
  .llsh-hero__heading--fixed .llsh-hero__heading-line{
    display:block;
    white-space:nowrap;
  }
  .llsh-hero__heading--fixed{
    font-size:clamp(2.3rem,3.4vw,3.75rem);
    line-height:1.17;
  }
}
@media (max-width:960px){
  .llsh-hero__heading--fixed .llsh-hero__heading-line{
    display:inline;
    white-space:normal;
  }
}


/* v0.3.9 — PC-only brand statement reveal.
   Mobile animation/timing is intentionally unchanged. */
@media (min-width:961px){
  .llsh-brand{
    min-height:min(72svh,820px);
    padding-top:clamp(86px,9vw,138px);
    padding-bottom:clamp(86px,9vw,138px);
  }

  .llsh-brand__inner{
    transform:none;
  }

  .llsh-brand__copyFrame{
    opacity:0;
    transform:translate3d(0,28px,0);
    filter:blur(3px);
    transition:
      opacity 1200ms cubic-bezier(.22,.61,.36,1),
      transform 1400ms cubic-bezier(.22,.61,.36,1),
      filter 1200ms cubic-bezier(.22,.61,.36,1);
    will-change:opacity,transform,filter;
  }

  .llsh-brand__identity{
    margin-top:52px;
    opacity:0;
    transform:translate3d(0,20px,0);
    filter:blur(2px);
    transition:
      opacity 1050ms cubic-bezier(.22,.61,.36,1) 360ms,
      transform 1250ms cubic-bezier(.22,.61,.36,1) 360ms,
      filter 1050ms cubic-bezier(.22,.61,.36,1) 360ms;
    will-change:opacity,transform,filter;
  }

  .llsh-brand.is-visible .llsh-brand__copyFrame,
  .llsh-brand.is-visible .llsh-brand__identity{
    opacity:1;
    transform:translate3d(0,0,0);
    filter:blur(0);
  }
}


/* v0.4.1 — PC-only real lightweight loop.
   The building and trees are fixed in the video; only clouds/light/water move.
   Mobile keeps the existing image + scroll behavior exactly as before. */
.llsh-pc-loop{display:none}
@media (min-width:961px){
  .llsh-pc-loop{
    position:absolute;
    inset:0;
    z-index:4;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    opacity:0;
    pointer-events:none;
    background:#02060c;
    transition:opacity .45s ease;
  }
  .llsh-hero.has-pc-loop .llsh-pc-loop{opacity:1}
  .llsh-hero.has-pc-loop .llsh-layer{opacity:0!important;animation:none!important}
  .llsh-hero.has-pc-loop .llsh-hero__media::before,
  .llsh-hero.has-pc-loop .llsh-hero__media::after{display:none!important;animation:none!important}

  /* The signature under the brand copy was too tiny on large screens. */
  .llsh-brand__symbol{width:28px;height:36px}
  .llsh-brand__name{font-size:.84rem;letter-spacing:.16em}
  .llsh-brand__identity{gap:.7rem}
}
@media (max-width:960px){
  .llsh-pc-loop{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  .llsh-pc-loop{display:none!important}
}


/* v0.4.2 — PC-only lightweight dawn sequence.
   Mobile image/scroll behavior is intentionally untouched.
   Sequence: starry pre-dawn -> one subtle shooting star -> morning once.
   After morning: clouds keep moving left-to-right forever; water keeps shimmering. */
.llsh-pc-atmosphere{display:none}

@media (min-width:961px){
  /* Remove the old MP4 and old pseudo-atmosphere paths completely. */
  .llsh-pc-loop{display:none!important}
  .llsh-hero__media::before,
  .llsh-hero__media::after{display:none!important;animation:none!important}

  .llsh-hero__media{isolation:isolate}
  .llsh-layer--dawn{
    z-index:0;
    opacity:1!important;
    animation:none!important;
  }
  .llsh-layer--night{
    z-index:1;
    opacity:1!important;
    animation:llshPcNightToMorning42 10.5s cubic-bezier(.22,.61,.36,1) .4s 1 forwards!important;
  }

  .llsh-pc-atmosphere{
    position:absolute;
    inset:0;
    z-index:2;
    display:block;
    overflow:hidden;
    pointer-events:none;
  }

  /* Seamless one-way cloud field. It never reverses. */
  .llsh-pc-clouds{
    position:absolute;
    left:-8%;
    top:-3%;
    width:116%;
    height:58%;
    display:block;
    opacity:0;
    background-image:url("pc-cloud-tile.webp");
    background-repeat:repeat-x;
    background-size:62vw 100%;
    background-position:0 0;
    mix-blend-mode:soft-light;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 68%,rgba(0,0,0,.62) 84%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 68%,rgba(0,0,0,.62) 84%,transparent 100%);
    animation:
      llshPcCloudIntro42 8s ease-out 2.8s 1 forwards,
      llshPcCloudFlow42 46s linear 0s infinite;
    will-change:background-position,opacity;
  }

  /* Tiny repeating reflection lines confined to the water. */
  .llsh-pc-water{
    position:absolute;
    left:35%;
    right:-4%;
    bottom:-2%;
    height:44%;
    display:block;
    opacity:0;
    background:
      repeating-linear-gradient(176deg,
        rgba(255,244,221,0) 0 8px,
        rgba(255,236,188,.10) 9px 10px,
        rgba(255,255,255,.025) 11px 12px,
        rgba(255,244,221,0) 13px 23px),
      linear-gradient(100deg,
        rgba(255,255,255,0) 18%,
        rgba(255,224,155,.02) 38%,
        rgba(255,229,169,.15) 52%,
        rgba(255,255,255,.04) 61%,
        rgba(255,255,255,0) 78%);
    background-size:100% 100%,175% 100%;
    background-position:0 0,-70% 0;
    mix-blend-mode:screen;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.40) 16%,#000 42%,#000 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.40) 16%,#000 42%,#000 100%);
    animation:
      llshPcWaterIntro42 8s ease-out 4.8s 1 forwards,
      llshPcWaterFlow42 7s linear 0s infinite;
    will-change:background-position,opacity;
  }

  /* One discreet shooting star before dawn. */
  .llsh-pc-shooting-star{
    position:absolute;
    left:33%;
    top:18%;
    width:72px;
    height:1px;
    display:block;
    opacity:0;
    transform:translate3d(-40px,-10px,0) rotate(-22deg);
    transform-origin:right center;
    border-radius:999px;
    background:linear-gradient(90deg,rgba(238,245,255,0),rgba(238,245,255,.16) 30%,rgba(248,251,255,.64) 100%);
    box-shadow:18px 0 10px rgba(226,239,255,.08);
    animation:llshPcShootingStar42 1.15s ease-out 1.25s 1 both;
    will-change:transform,opacity;
  }

  /* Keep the landscape itself still. */
  .llsh-layer img{transform:none!important;animation:none!important}
}

@keyframes llshPcNightToMorning42{
  0%,12%{opacity:1}
  58%{opacity:.58}
  88%,100%{opacity:0}
}
@keyframes llshPcCloudIntro42{
  0%{opacity:.08}
  100%{opacity:.34}
}
@keyframes llshPcCloudFlow42{
  from{background-position:0 0}
  to{background-position:62vw 0}
}
@keyframes llshPcWaterIntro42{
  0%{opacity:0}
  100%{opacity:.30}
}
@keyframes llshPcWaterFlow42{
  from{background-position:0 0,-70% 0}
  to{background-position:24px 13px,70% 0}
}
@keyframes llshPcShootingStar42{
  0%{opacity:0;transform:translate3d(-36px,-8px,0) rotate(-22deg) scaleX(.45)}
  22%{opacity:.42}
  70%{opacity:.26}
  100%{opacity:0;transform:translate3d(120px,42px,0) rotate(-22deg) scaleX(1)}
}

@media (prefers-reduced-motion:reduce){
  .llsh-hero.is-desktop-auto .llsh-layer--night{opacity:0!important;animation:none!important}
  .llsh-hero.is-desktop-auto .llsh-layer--dawn{opacity:1!important;animation:none!important}
  .llsh-pc-atmosphere{display:none!important}
}


/* v0.4.3 — PC-only actual lightweight video sequence.
   Intro video plays once: pre-dawn -> morning with one subtle shooting star.
   Then a separate bright-morning video loops forever with one-way cloud drift
   and restrained water motion. Mobile CSS/behavior is untouched. */
.llsh-pc-intro-video,
.llsh-pc-morning-video{display:none}

@media (min-width:961px){
  .llsh-hero__media{z-index:0;isolation:isolate}
  .llsh-pc-intro-video,
  .llsh-pc-morning-video{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    pointer-events:none;
    opacity:0;
    background:#02060c;
    transform:translateZ(0);
    backface-visibility:hidden;
  }
  .llsh-pc-intro-video{z-index:4}
  .llsh-pc-morning-video{z-index:5}

  .llsh-hero.is-pc-video-ready .llsh-pc-intro-video{opacity:1}
  .llsh-hero.is-pc-video-ready .llsh-layer,
  .llsh-hero.is-pc-video-ready .llsh-pc-atmosphere{
    opacity:0!important;
    animation:none!important;
  }
  .llsh-hero.is-pc-morning .llsh-pc-intro-video{opacity:0}
  .llsh-hero.is-pc-morning .llsh-pc-morning-video{opacity:1}

  /* PC hero itself remains normal-flow: no sticky/scroll-linked motion. */
  .llsh-hero{margin:0!important}
  .llsh-hero__scrollcue{display:none!important}
}

@media (max-width:960px){
  .llsh-pc-intro-video,
  .llsh-pc-morning-video{display:none!important}
}

@media (prefers-reduced-motion:reduce){
  .llsh-pc-intro-video,
  .llsh-pc-morning-video{display:none!important}
}


/* v0.4.5 — PC motion is explicitly requested by the site owner.
   Keep smartphone behavior unchanged, but do not let an OS/browser
   reduced-motion preference silently disable the PC hero video. */
@media (min-width:961px) and (prefers-reduced-motion:reduce){
  .llsh-pc-intro-video,
  .llsh-pc-morning-video{
    display:block!important;
  }
}