/* Scoped changes from the current approved request only. */

/* The orb lands on each glyph; only the glyph it touches reacts. */
header .identity > span{position:relative;white-space:nowrap}
header .identity img{mix-blend-mode:normal!important;background:transparent!important}
header .identity .brand-letter{display:inline-block;transform-origin:50% 80%}
header .identity .brand-letter.is-hit{animation:brand-letter-impact .31s ease-out}
header .identity .brand-orb{
  position:absolute;
  left:0;
  top:0;
  width:8px;
  height:8px;
  border-radius:50%;
  border:1px solid rgba(103,129,133,.52);
  background:radial-gradient(circle at 32% 27%,#fff 0 17%,#e6f0ee 31%,#b8ced0 69%,#849ea3 100%);
  box-shadow:inset -1px -1px 2px #68868a45,0 2px 5px #5d7a8038;
  pointer-events:none;
  opacity:0;
  will-change:transform;
}
@keyframes brand-letter-impact{
  0%,100%{transform:translateY(0) rotate(0)}
  20%{transform:translateY(.18em) rotate(-2deg)}
  48%{transform:translateY(-.22em) rotate(1.4deg)}
  72%{transform:translateY(.075em) rotate(-.6deg)}
}
@media(prefers-reduced-motion:reduce){
  header .identity .brand-orb{display:none}
}

/* Use the previously approved display face; REAL keeps its italic accent. */
html[data-study="b"] body .introduction h1,
html[data-study="b"] body .introduction h1 i{
  font-family:'Syncopate',sans-serif;
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.08;
}
html[data-study="b"] body .introduction h1 i{font-style:normal;font-weight:700;color:#526c74}

/* The fold label uses the same quieter gray on desktop and mobile. */
.deck-controls #fold{color:#697575}

/* Slightly clarify the existing outer edge only; preserve the approved card
   material so stacked cards do not leave an opaque-looking fold trace. */
.card{
  border-color:rgba(130,153,158,.42);
  background:linear-gradient(125deg,rgba(255,255,255,.78),rgba(255,255,255,.52) 48%,rgba(238,245,245,.61) 78%,rgba(255,255,255,.80));
}
.card:before{border-color:#ffffff8a}

/* Keep the approved lower-right depth, remove the experimental upper-left
   shadow, and use one shadow in both deck states so it cannot animate during
   opening or folding. */
.card,
body:not(.expanded) .card,
.expanded .card[data-active="true"]{
  box-shadow:inset 0 1px 1px rgba(255,255,255,.61),1px 1.5px 2.5px rgba(104,125,128,.17),0 14px 24px rgba(73,100,107,.14);
}

/* Preserve the established right-side anchor on desktop.  These rules only
   lock the existing header/footer edge alignment; they do not alter tiles. */
@media(min-width:701px){
  header .studio-signature{margin-left:auto;transform:translateX(15px)!important}
  footer .edition{right:0;transform:translate(15px,10px)!important}
  /* Restored pre-redraw porcelain material with restrained window daylight.
     The original cover/center geometry remains untouched; only the light
     layers are softened so grout stays legible. */
  .world .backlight{
    background-color:#fff;
    background-image:url('white-glazed-tile-seamless-fine.png');
    /* Do not screen-blend the baked bevel highlight: it visually widens the
       grout even after the darker seam has been softened. */
    background-blend-mode:normal;
    filter:url('#desktop-thin-tile-lines') saturate(.99);
  }
  .world:before{display:block!important;background:linear-gradient(90deg,transparent 5%,#758e9b14 12%,transparent 13% 31%,#647f8f20 32% 34%,transparent 35% 54%,#647f8f20 55% 57%,transparent 58% 78%,#758e9b14 79%,transparent 81%);filter:blur(6px)!important;animation:desktop-window-shadow-muted 12s ease-in-out infinite alternate!important}
  .world:after{display:block!important;filter:none!important;animation:desktop-daylight-muted 12s ease-in-out infinite alternate!important}
  .world .window-light{display:block!important;filter:blur(5px)!important;animation:desktop-window-daylight-muted 12s ease-in-out infinite alternate!important}
  .world .glaze{display:block!important;filter:none!important;animation:desktop-glaze-muted 12s ease-in-out infinite alternate!important}
  .world .backlight:after{
    display:block!important;
    inset:-12%!important;
    background:
      linear-gradient(109deg,transparent 13% 23%,rgba(176,202,207,.09) 25%,rgba(255,255,255,.78) 27%,rgba(255,255,255,.24) 30%,transparent 34% 48%,rgba(183,207,211,.08) 50%,rgba(255,255,255,.62) 52%,rgba(255,255,255,.16) 55%,transparent 59%),
      radial-gradient(ellipse 29% 17% at 68% 18%,rgba(255,255,255,.7) 0 18%,rgba(255,255,255,.22) 43%,transparent 74%)!important;
    mix-blend-mode:normal!important;
    opacity:.1;
    filter:blur(9px)!important;
    animation:desktop-tile-sheen 15s ease-in-out infinite alternate!important;
  }
  @keyframes desktop-window-daylight-muted{from{opacity:.02;transform:rotate(-24deg) skewX(-28deg) translateX(-3%)}to{opacity:.06;transform:rotate(-24deg) skewX(-28deg) translateX(4%)}}
  @keyframes desktop-daylight-muted{from{opacity:.008}to{opacity:.026}}
  /* The darker frame projection remains independent from daylight brightness. */
  @keyframes desktop-window-shadow-muted{from{opacity:.72;transform:rotate(-24deg) skewX(-28deg) translateX(-3%)}to{opacity:1;transform:rotate(-24deg) skewX(-28deg) translateX(4%)}}
  @keyframes desktop-glaze-muted{from{opacity:.015}to{opacity:.045}}
  @keyframes desktop-tile-sheen{from{opacity:.08;transform:translate3d(-1.5%,0,0)}to{opacity:.14;transform:translate3d(1.5%,.5%,0)}}
}

/* The card sweep is a mobile-only detail. */
@media(max-width:700px){
  .card:after{display:none!important;animation:none!important}
}

/* Reliable demo-only prism projection. It is intentionally a background layer, not an overlay on the cards. */
html.desktop-shadow-demo body::before{content:none}

/* Mobile uses only the approved sweep inside project thumbnails. The global
   porcelain sweep is disabled for every phone platform. */
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
  html.mobile-card-sweep .card .preview-mat::after{
    content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
    display:block!important;border-radius:inherit;
    background:linear-gradient(120deg,transparent 40%,#ffffff80 50%,transparent 60%);
    background-size:300% 100%;background-repeat:no-repeat;
    opacity:.46;animation:mobile-thumbnail-sweep 10s ease-in-out infinite;
  }
  html.mobile-card-sweep .deck-transitioning .card .preview-mat::after{opacity:0!important;animation-play-state:paused}
  @keyframes mobile-thumbnail-sweep{0%,72%{background-position:100% 0}100%{background-position:0% 0}}
}
@media(min-width:701px){
  html[data-wordmark] body header .identity > span{
    --brand-type-size:clamp(12px,1.025vw,14px);
    font-size:var(--brand-type-size);
    transform:translate(-4px,2px);
  }
  html[data-wordmark] body header .identity > span .brand-letter{font-size:var(--brand-type-size)}
  html[data-wordmark] body header .identity > span .brand-orb{
    width:calc(var(--brand-type-size)*.5);
    height:calc(var(--brand-type-size)*.5);
  }
  .introduction .statement{font-size:18px}
  .card{
    border-width:1px;
    border-color:rgba(128,151,156,.24);
    background:linear-gradient(125deg,rgba(255,255,255,.94),rgba(247,251,250,.93) 48%,rgba(238,245,245,.94) 78%,rgba(255,255,255,.95));
  }
  body.expanded .card[data-active="true"]{
    background:linear-gradient(125deg,rgba(255,255,255,.995),rgba(247,251,250,.99) 48%,rgba(238,245,245,.992) 78%,rgba(255,255,255,.997));
  }
  .card:before{border-color:transparent}
  .card:after{display:none!important;animation:none!important}
}

/* Slightly lift only the existing chef-card blue stops; the gradient remains. */
.card[data-theme=chef]{
  --stage-bg:radial-gradient(ellipse at 50% 36%,#416494 0%,#294b7c 48%,#152a56 100%);
}

@media(max-width:700px){
  .introduction h1,
  .introduction .statement{translate:0 -5px}

  .card,
  body:not(.expanded) .card,
  .expanded .card[data-active="true"]{
    border-width:1px;
    border-color:rgba(145,163,168,.18);
    background:linear-gradient(125deg,rgba(255,255,255,.94),rgba(247,251,250,.93) 48%,rgba(238,245,245,.94) 78%,rgba(255,255,255,.95));
    box-shadow:inset 0 1px 1px rgba(255,255,255,.59),.8px 1.3px 2.2px rgba(104,125,128,.18),0 10px 18px rgba(73,100,107,.14);
  }

  html[data-study="b"] body .introduction h1,
  html[data-study="b"] body .introduction h1 i{letter-spacing:-.035em}

  /* Keep the work entry as one compact text-and-icon action. */
  .stack-trigger{gap:10px;padding-inline:12px}
  .stack-trigger .round-arrow{width:34px;height:34px;flex:0 0 34px}

  /* Restore the approved mobile identity: left-side horizontal lockup. */
  header{
    display:flex!important;
    width:100%;
    height:auto;
    justify-content:space-between!important;
    align-items:center;
    position:static;
  }
  header .identity{
    position:static;
    flex-direction:row;
    align-items:center;
    gap:clamp(2px,.8vw,4px)!important;
    transform:translateX(3px)!important;
    text-align:left;
    margin:0;
  }
  header .identity img{width:clamp(54px,15vw,64px);height:clamp(54px,15vw,64px)}
  header .identity > span{font-size:clamp(10px,2.85vw,13px);transform:translate(-6px,5px);white-space:nowrap}
  header .identity .brand-orb{width:6px;height:6px}

  /* Preserve the approved tile artwork and its original mobile scale. */
  .world .backlight{
    inset:-12% -34%;
    background-color:#fff;
    background-image:url('white-glazed-tile-seamless.png');
    background-size:clamp(560px,155vw,780px) auto;
    background-position:center top;
    background-repeat:repeat;
    transform:rotateX(10deg);
    transform-origin:50% 45%;
    /* Match the desktop porcelain luminance without touching this approved
       mobile asset's size, anchor, crop, or transform. */
    filter:url('#porcelain-highlight-control') saturate(.99);
  }
  /* Mobile ambient light is intentionally removed.  The tile artwork itself
     remains unchanged. */
  .mobile-light-engine,.mobile-light-engine > i{display:none!important;animation:none!important}
  .world .window-light{
    display:block!important;
    left:-28%;top:39%;bottom:auto;width:104%;height:50%;
    border-radius:50%;
    background:radial-gradient(ellipse at 43% 50%,rgba(255,255,255,.92) 0 11%,rgba(255,255,255,.72) 23%,rgba(255,255,255,.48) 39%,rgba(255,255,255,.22) 54%,rgba(255,255,255,.07) 64%,transparent 74%);
    box-shadow:none;
    filter:blur(14px)!important;
    mix-blend-mode:normal;
    opacity:.13!important;
    animation:mobile-local-glow 14s ease-in-out infinite alternate!important;
    transform-origin:43% 50%;
  }
  @keyframes mobile-local-glow{
    from{opacity:.1;transform:translate3d(-1.5%,1%,0) scale(.98)}
    to{opacity:.16;transform:translate3d(2%,-1%,0) scale(1.025)}
  }

  /* Keep the card surface whole while the three cards physically gather. */
  .deck-transitioning .card:after{opacity:0!important;animation:none!important}

  /* Prevent labels on the rear cards from showing through the active card
     after a swipe, while preserving the three-card composition. */
  body.expanded .card{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    outline:0;
  }

  /* The selected card must remain visually clean: its former 93–95% material
     allowed the rear card labels to bleed through on mobile.  Keep the side
     cards and the folded stack unchanged; only the expanded active face gets
     a nearly opaque porcelain surface. */
  body.expanded .card[data-active="true"]{
    background:linear-gradient(125deg,rgba(255,255,255,.995),rgba(247,251,250,.99) 48%,rgba(238,245,245,.992) 78%,rgba(255,255,255,.997));
  }

}

.page-liquid-loader{position:fixed;inset:0;z-index:2147483000;pointer-events:none;background:linear-gradient(145deg,#f8f8f5 0%,#eef3f2 52%,#fbfaf6 100%)}
html.page-loading{overflow:hidden}
html.page-loading .experience{visibility:hidden}

/* Demo-only porcelain ripple layer. It lives inside the existing backlight,
   so it inherits the exact tile crop/position without affecting layout. */
.foliage-shadow{display:none;pointer-events:none}
@media(min-width:701px){
  .world .foliage-shadow{display:block;position:absolute;right:0;bottom:5%;width:32%;height:51%;background:url('foliage-shadow.svg?v=4') right center/contain no-repeat;filter:blur(2.5px);opacity:.3;mix-blend-mode:multiply;transform-origin:100% 70%;animation:foliage-sway 9s ease-in-out infinite alternate;mask-image:linear-gradient(90deg,transparent,#000 30%)}
  @keyframes foliage-sway{from{transform:rotate(-2deg) translateY(0);opacity:.10}to{transform:rotate(2deg) translateY(-1.5%);opacity:.14}}
}
/* Desktop foliage is not part of the approved Hero. Keep the mobile rule untouched. */
@media(min-width:701px){.world .foliage-shadow{display:none!important;animation:none!important}}
@media(prefers-reduced-motion:reduce){.world .foliage-shadow{animation:none!important}}
.tile-liquid-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;mix-blend-mode:normal}
@media(min-width:701px){.tile-liquid-canvas{display:none!important}}
@media(max-width:700px){
  /* Preserve the approved sweep pixels and timing verbatim. Only the finished
     overlay is tilted and moved so it enters from below the visible stage. */
  .tile-liquid-canvas{transform:none}
  .world .foliage-shadow{display:block;position:absolute;right:0;top:4%;width:39%;height:28%;background:url('foliage-shadow.svg?v=4') right center/contain no-repeat;filter:blur(2px);opacity:.19;mix-blend-mode:multiply;transform-origin:100% 70%;animation:mobile-foliage-sway 8.4s ease-in-out infinite;mask-image:linear-gradient(90deg,transparent,#000 35%)}
  @keyframes mobile-foliage-sway{
    0%,100%{transform:translate3d(-.7%,.35%,0) rotate(-1.6deg) skewX(-.7deg);opacity:.12}
    24%{transform:translate3d(.15%,-.18%,0) rotate(.35deg) skewX(.45deg);opacity:.145}
    52%{transform:translate3d(.85%,-.5%,0) rotate(1.9deg) skewX(1.05deg);opacity:.17}
    76%{transform:translate3d(.1%,.05%,0) rotate(.15deg) skewX(-.3deg);opacity:.145}
  }
}

/* Desktop floor-window projection removed by request. Keep the foliage,
   porcelain surface, and all mobile effects unchanged. */
@media(min-width:701px){
  .world:before,
  .world .window-light,
  .world:after,
  .world .glaze,
  .world .backlight:after,
  .mobile-light-engine,
  .demo-ambient{display:none!important;animation:none!important}
}

/* Desktop-only thumbnail sweep, using the exact approved mobile card-sweep
   timing and gradient while clipping it to the thumbnail frame. */
@media(min-width:701px) and (prefers-reduced-motion:no-preference){
  .card .preview-mat::after{
    content:'';
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;
    border-radius:inherit;
    background:linear-gradient(120deg,transparent 40%,#ffffff80 50%,transparent 60%);
    background-size:300% 100%;
    background-repeat:no-repeat;
    opacity:.46;
    animation:desktop-thumbnail-sweep 10s ease-in-out infinite;
  }
  .deck-transitioning .card .preview-mat::after{opacity:0!important;animation-play-state:paused}
  @keyframes desktop-thumbnail-sweep{
    0%,72%{background-position:100% 0}
    100%{background-position:0% 0}
  }
}

/* On mobile the global porcelain sweep is the only white illumination.
   Desktop keeps its approved floor-window light and has no new sweep. */
@media(max-width:700px){
  .world:before,
  .world:after,
  .world .window-light,
  .world .glaze,
  .world .backlight:after,
  .mobile-light-engine,
  .demo-ambient{display:none!important;animation:none!important}
}

/* Project and About dialogs share the approved contact-menu liquid glass. */
@media(max-width:700px){
  #project-dialog.mobile-melting,#information.mobile-melting{
    isolation:isolate;overflow:hidden;background:transparent!important;
    border-color:transparent!important;box-shadow:none!important;
  }
  #project-dialog.mobile-melting:before,#information.mobile-melting:before{
    content:'';position:absolute;inset:0;z-index:60;pointer-events:none;
    border:1px solid #fff;border-radius:inherit;
    background:linear-gradient(130deg,#ffffff99,#ffffff11 50%,#ffffff88);
    box-shadow:inset 2px 3px 4px #fff,inset -2px -3px 4px #91a5b339,0 2px 7px #8b9da929;
    backdrop-filter:blur(3px) contrast(1.15);
    -webkit-backdrop-filter:blur(3px) contrast(1.15);
  }
  #project-dialog.mobile-melting:after,#information.mobile-melting:after{
    content:'';position:absolute;inset:0;z-index:61;pointer-events:none;
    border-radius:inherit;
    background:linear-gradient(115deg,transparent 18%,#ffffffd9 28%,#dff8ff75 34%,transparent 49%,#ffffff9c 68%,transparent 79%);
    mix-blend-mode:screen;opacity:.56;
  }
  #project-dialog.mobile-melting>* ,#information.mobile-melting>*{opacity:0!important}
  #information.mobile-melting>*{opacity:0!important}
}

@keyframes mobile-oval-sun{
  from{transform:translate3d(-5vw,-1.5dvh,0) scale(1);opacity:.24}
  to{transform:translate3d(6vw,2dvh,0) scale(1.055);opacity:.48}
}
@keyframes mobile-oval-cool{
  from{transform:translate3d(-3vw,0,0) scale(1);opacity:.10}
  to{transform:translate3d(4vw,1.5dvh,0) scale(1.035);opacity:.36}
}

/* Desktop shadow study: query-gated and absent from production rendering. */
.desktop-shadow-study,.shadow-demo-picker{display:none}
.desktop-optical-canvas{display:none}
@media(min-width:701px){
  html.desktop-shadow-demo .world .foliage-shadow{display:none!important;animation:none!important}
  html.desktop-shadow-demo .desktop-shadow-study{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;mix-blend-mode:multiply}
  html.desktop-shadow-demo .desktop-shadow-study>*{position:absolute;display:block;content:'';pointer-events:none}
  html.desktop-shadow-demo .shadow-demo-picker{display:flex;position:fixed;left:50%;top:18px;z-index:9999;transform:translateX(-50%);gap:6px;padding:6px;border:1px solid #fff;border-radius:999px;background:#f5f7f3d9;box-shadow:0 10px 30px #40545922;backdrop-filter:blur(14px)}
  html.desktop-shadow-demo .shadow-demo-picker button{border:0;border-radius:999px;padding:9px 13px;background:transparent;color:#536365;font:12px/1.2 system-ui,sans-serif;letter-spacing:.04em;cursor:pointer}
  html.desktop-shadow-demo .shadow-demo-picker button.active{background:#3f5557;color:#fff;box-shadow:0 4px 12px #36494c33}

  /* A — tall arched studio window, with broad daylight instead of hard bars. */
  html[data-shadow="arch"] .desktop-shadow-study:before{content:'';position:absolute;left:9%;top:-20%;width:58%;height:126%;border-radius:48% 48% 8% 8%/24% 24% 5% 5%;background:linear-gradient(90deg,transparent 0 46%,#60777e20 47% 49%,transparent 50%),linear-gradient(0deg,transparent 0 47%,#60777e1a 48% 50%,transparent 51%),radial-gradient(ellipse at 48% 47%,#fff0 0 58%,#60777e16 60% 62%,transparent 64%);filter:blur(5px);transform:rotate(-13deg) skewX(-8deg);opacity:.82}
  html[data-shadow="arch"] .desktop-shadow-study i{left:14%;top:5%;width:48%;height:92%;border-radius:50% 50% 5% 5%/23% 23% 4% 4%;background:linear-gradient(112deg,#fff0 16%,#ffffff7a 35%,#fff0 57%);filter:blur(24px);opacity:.42}

  /* B — generous atelier grid; broad panes keep it architectural and soft. */
  html[data-shadow="grid"] .desktop-shadow-study:before{content:'';position:absolute;inset:-18% 12% -14% -8%;background:repeating-linear-gradient(90deg,transparent 0 18%,#526a7117 18.4% 19.2%,transparent 19.6% 38%),repeating-linear-gradient(0deg,transparent 0 27%,#526a7114 27.4% 28.2%,transparent 28.6% 56%);filter:blur(4.5px);transform:rotate(-12deg) skewX(-9deg);opacity:.85}
  html[data-shadow="grid"] .desktop-shadow-study i{inset:-10% 8%;background:linear-gradient(120deg,transparent 14%,#ffffff7d 33%,transparent 53%);filter:blur(30px);opacity:.38}

  /* C — vase and two stems, intentionally low and off-centre like a still life. */
  html[data-shadow="vase"] .desktop-shadow-study:before{content:'';right:9%;bottom:-8%;width:23%;height:45%;border-radius:46% 46% 18% 18%/23% 23% 12% 12%;background:radial-gradient(ellipse at 50% 12%,transparent 0 21%,#566a6d18 23% 29%,transparent 31%),linear-gradient(100deg,#7080820d,#4e62651e 48%,#7384860c);filter:blur(8px);transform:skewX(-9deg) rotate(-3deg);opacity:.8}
  html[data-shadow="vase"] .desktop-shadow-study i{right:19%;bottom:30%;width:4.5%;height:40%;border-radius:70% 20%;border-left:12px solid #52676a1b;transform:rotate(-19deg);filter:blur(5px)}
  html[data-shadow="vase"] .desktop-shadow-study b{right:10%;bottom:39%;width:17%;height:22%;border-radius:62% 38% 58% 42%;background:radial-gradient(ellipse at 40% 55%,#4f64671c,transparent 67%);filter:blur(7px);transform:rotate(15deg)}
  html[data-shadow="vase"] .desktop-shadow-study em{right:23%;bottom:54%;width:14%;height:17%;border-radius:55% 45% 62% 38%;background:radial-gradient(ellipse at 55% 55%,#4f646719,transparent 69%);filter:blur(7px);transform:rotate(-17deg)}

  /* D — venetian blind and a quiet outer frame, softened by distance. */
  html[data-shadow="blind"] .desktop-shadow-study:before{content:'';position:absolute;inset:-20% -8% -16% 14%;background:repeating-linear-gradient(0deg,transparent 0 8.4%,#526a7015 8.8% 9.7%,transparent 10.1% 17%);filter:blur(5px);transform:rotate(-17deg) skewX(-5deg);opacity:.88}
  html[data-shadow="blind"] .desktop-shadow-study:before{animation:blind-drift 13s ease-in-out infinite alternate}
  html[data-shadow="blind"] .desktop-shadow-study i{left:12%;top:-12%;width:74%;height:125%;border:18px solid #526a700f;border-radius:3%;filter:blur(9px);transform:rotate(-17deg) skewX(-5deg);animation:blind-frame 13s ease-in-out infinite alternate}
  html[data-shadow="blind"] .desktop-shadow-study b{inset:-8%;background:linear-gradient(112deg,transparent 12%,#ffffff70 33%,transparent 62%);filter:blur(28px);opacity:.35;animation:daylight-breathe 11s ease-in-out infinite alternate}

  /* B — translucent sheer curtains: broad folds, no hard black geometry. */
  html[data-shadow="sheer"] .desktop-shadow-study:before{content:'';position:absolute;left:-8%;top:-15%;width:78%;height:132%;background:repeating-linear-gradient(96deg,transparent 0 9%,#62777b0a 13%,#53696d17 18%,#647a7e09 24%,transparent 31%);filter:blur(13px);transform:rotate(-8deg) skewX(-4deg);opacity:.9;animation:sheer-billow 9s cubic-bezier(.45,0,.55,1) infinite alternate}
  html[data-shadow="sheer"] .desktop-shadow-study i{left:-5%;top:-12%;width:74%;height:128%;background:linear-gradient(112deg,transparent 9%,#ffffff7a 27%,#ffffff18 46%,#fff7 63%,transparent 82%);filter:blur(32px);opacity:.5;animation:sheer-light 12s ease-in-out infinite alternate}
  html[data-shadow="sheer"] .desktop-shadow-study b{left:12%;bottom:-8%;width:62%;height:27%;border-radius:50%;background:#5d73760b;filter:blur(25px);transform:rotate(-7deg);animation:sheer-floor 9s ease-in-out infinite alternate}

  /* C — open casement, strengthened after the first study was too faint. */
  html[data-shadow="casement"] .desktop-shadow-study:before{content:'';position:absolute;right:1%;top:-22%;width:63%;height:145%;border-left:22px solid #445d6426;border-right:12px solid #445d641a;background:linear-gradient(72deg,transparent 0 41%,#445d6420 42% 45%,transparent 46%);filter:blur(5px);transform:perspective(900px) rotateY(-16deg) rotateZ(11deg) skewX(-7deg);opacity:.96;animation:casement-open 15s ease-in-out infinite alternate}
  html[data-shadow="casement"] .desktop-shadow-study i{right:-2%;top:-14%;width:70%;height:132%;clip-path:polygon(18% 0,100% 12%,91% 100%,0 87%);background:linear-gradient(122deg,#ffffff82,transparent 70%);filter:blur(20px);opacity:.5;animation:casement-light 15s ease-in-out infinite alternate}
  html[data-shadow="casement"] .desktop-shadow-study b{right:4%;top:18%;width:58%;height:1.8%;background:#445d6421;filter:blur(4px);transform:rotate(11deg)}
  html[data-shadow="casement"] .desktop-shadow-study em{right:0;bottom:23%;width:62%;height:1.8%;background:#445d641d;filter:blur(4px);transform:rotate(11deg)}

  /* D — the previously used foliage silhouette, restored only for comparison. */
  html[data-shadow="foliage"] .desktop-shadow-study:before{content:'';position:absolute;right:-1%;bottom:1%;width:39%;height:62%;background:url('foliage-shadow.svg?v=4') right center/contain no-repeat;filter:blur(3px);opacity:.14;transform:rotate(-1deg);transform-origin:100% 70%;animation:foliage-demo-sway 8.5s cubic-bezier(.42,0,.58,1) infinite alternate}
  html[data-shadow="foliage"] .desktop-shadow-study i{right:0;bottom:0;width:45%;height:64%;background:radial-gradient(ellipse at 72% 64%,#53686b0c,transparent 66%);filter:blur(18px)}

  /* E — airy branch with smaller leaves and more negative space. */
  html[data-shadow="branch"] .desktop-shadow-study:before{content:'';position:absolute;right:-3%;top:4%;width:48%;height:72%;background:url('shadow-branch.svg?v=1') right top/contain no-repeat;filter:blur(2.8px);opacity:.17;transform:rotate(-4deg);transform-origin:100% 10%;animation:branch-demo-sway 7.2s cubic-bezier(.37,0,.63,1) infinite alternate}
  html[data-shadow="branch"] .desktop-shadow-study i{right:3%;top:5%;width:46%;height:68%;background:linear-gradient(135deg,transparent 18%,#ffffff46 49%,transparent 78%);filter:blur(30px);opacity:.32}

  /* F — broad tropical leaves, concentrated on one edge to avoid clutter. */
  html[data-shadow="tropical"] .desktop-shadow-study:before{content:'';position:absolute;left:-7%;bottom:-9%;width:46%;height:76%;background:url('shadow-tropical.svg?v=1') left bottom/contain no-repeat;filter:blur(3.6px);opacity:.16;transform:rotate(3deg);transform-origin:0 100%;animation:tropical-demo-sway 10.5s cubic-bezier(.45,0,.55,1) infinite alternate}
  html[data-shadow="tropical"] .desktop-shadow-study i{left:-2%;bottom:-3%;width:48%;height:72%;background:radial-gradient(ellipse at 20% 76%,#53686b0c,transparent 65%);filter:blur(20px)}

  @keyframes blind-drift{from{transform:translate3d(calc(var(--shadow-px,0)*-5px),calc(var(--shadow-py,0)*-3px),0) rotate(-17deg) skewX(-5deg)}to{transform:translate3d(calc(2.2% + var(--shadow-px,0)*-5px),calc(-1.2% + var(--shadow-py,0)*-3px),0) rotate(-16.2deg) skewX(-4.4deg)}}
  @keyframes blind-frame{from{transform:translateX(calc(var(--shadow-px,0)*-4px)) rotate(-17deg) skewX(-5deg)}to{transform:translateX(calc(1.5% + var(--shadow-px,0)*-4px)) rotate(-16.2deg) skewX(-4.4deg)}}
  @keyframes daylight-breathe{from{opacity:.25;transform:translateX(-2%)}to{opacity:.43;transform:translateX(3%)}}
  @keyframes sheer-billow{from{transform:translate3d(calc(-1.5% + var(--shadow-px,0)*-5px),0,0) rotate(-8deg) skewX(-4deg) scaleX(.98)}to{transform:translate3d(calc(2% + var(--shadow-px,0)*-5px),-1%,0) rotate(-7.4deg) skewX(-2.2deg) scaleX(1.035)}}
  @keyframes sheer-light{from{opacity:.34;transform:translateX(-3%)}to{opacity:.53;transform:translateX(4%)}}
  @keyframes sheer-floor{from{transform:translateX(-2%) rotate(-7deg) scaleX(.96)}to{transform:translateX(3%) rotate(-6deg) scaleX(1.04)}}
  @keyframes casement-open{from{transform:translateX(calc(var(--shadow-px,0)*-5px)) perspective(900px) rotateY(-18deg) rotateZ(11deg) skewX(-7deg)}to{transform:translateX(calc(1.8% + var(--shadow-px,0)*-5px)) perspective(900px) rotateY(-11deg) rotateZ(10.4deg) skewX(-6deg)}}
  @keyframes casement-light{from{opacity:.34;transform:translateX(-2%)}to{opacity:.55;transform:translateX(2.5%)}}
  @keyframes foliage-demo-sway{from{transform:translate3d(calc(var(--shadow-px,0)*-6px),1%,0) rotate(-2.4deg) scale(.99)}to{transform:translate3d(calc(1.8% + var(--shadow-px,0)*-6px),-1.2%,0) rotate(2deg) scale(1.018)}}
  @keyframes branch-demo-sway{from{transform:translate3d(calc(var(--shadow-px,0)*-8px),0,0) rotate(-5.4deg)}to{transform:translate3d(calc(2.4% + var(--shadow-px,0)*-8px),-1.7%,0) rotate(2.2deg)}}
  @keyframes tropical-demo-sway{from{transform:translate3d(calc(var(--shadow-px,0)*-4px),1%,0) rotate(1.5deg) scale(.985)}to{transform:translate3d(calc(1.3% + var(--shadow-px,0)*-4px),-1%,0) rotate(5deg) scale(1.015)}}
}
@media(prefers-reduced-motion:reduce){html.desktop-shadow-demo .desktop-shadow-study,html.desktop-shadow-demo .desktop-shadow-study>*{animation:none!important}}

/* Dynamic ambient study v2 is strictly desktop-only. */
@media(min-width:701px){
html.desktop-shadow-demo .desktop-shadow-study{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;mix-blend-mode:multiply}
html.desktop-shadow-demo .desktop-optical-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
html.desktop-shadow-demo .webgl-prism-canvas{mix-blend-mode:multiply;filter:saturate(1.08) contrast(1.02)}
html.desktop-shadow-demo .desktop-spectral-svg{display:none;position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible;transform:translate3d(var(--spectral-drift,0),0,0);mix-blend-mode:normal}
html.desktop-shadow-demo .desktop-fluid-lens-svg{display:none;position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible;animation:lens-float 7.5s ease-in-out infinite alternate}
html.desktop-shadow-demo .desktop-water-flow-svg{animation:water-sheet-fall 9.8s linear infinite;filter:contrast(1.08) saturate(.82);mix-blend-mode:multiply;will-change:transform}
@keyframes water-sheet-fall{from{transform:translate3d(0,-72%,0)}to{transform:translate3d(0,74%,0)}}
html.desktop-shadow-demo .desktop-glass-prism,
html.desktop-shadow-demo .desktop-iridescent-film,
html.desktop-shadow-demo .desktop-gsap-prism,
html.desktop-shadow-demo .desktop-aurora-film{display:none;position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
html.desktop-shadow-demo .desktop-glass-prism i{position:absolute;left:30%;top:33%;width:38%;height:34%;border-radius:60% 40% 58% 42%/46% 64% 36% 54%;transform-origin:50% 50%;background:conic-gradient(from 30deg,#ff789c00,#ff789c50,#ffd98f48,#8fffd84a,#76bfff50,#bd83ff48,#ff789c00);filter:blur(9px) saturate(1.22);mix-blend-mode:normal;box-shadow:inset 0 2px #ffffffa0,0 0 28px #8edfff24}
html.desktop-shadow-demo .desktop-glass-prism i:nth-child(2){clip-path:polygon(2% 38%,98% 0,84% 57%,10% 100%);filter:blur(12px) saturate(1.32)}
html.desktop-shadow-demo .desktop-glass-prism i:nth-child(3){clip-path:polygon(4% 12%,100% 28%,91% 86%,0 64%);filter:blur(17px)}
html.desktop-shadow-demo .desktop-glass-prism i:nth-child(4){height:5%;top:45%;background:linear-gradient(90deg,transparent,#fff8 30%,#98f7ff80 50%,#fff7 68%,transparent);filter:blur(9px)}
html.desktop-shadow-demo .desktop-glass-prism i:nth-child(5){height:18%;top:39%;background:radial-gradient(ellipse at 54% 50%,#fff7,transparent 18%),linear-gradient(180deg,transparent,#bceeff34 47%,transparent);filter:blur(18px)}

html.desktop-shadow-demo .desktop-aurora-film{filter:saturate(1.15);-webkit-mask:radial-gradient(ellipse 42% 35% at 50% 51%,#000 4%,#000e 48%,transparent 82%);mask:radial-gradient(ellipse 42% 35% at 50% 51%,#000 4%,#000e 48%,transparent 82%)}
html.desktop-shadow-demo .desktop-aurora-film i{position:absolute;left:18%;top:31%;width:65%;height:44%;border-radius:50%;filter:blur(28px);opacity:.42;mix-blend-mode:screen}
html.desktop-shadow-demo .desktop-aurora-film i:nth-child(1){background:radial-gradient(ellipse at 30% 50%,#ff78936b,transparent 54%);animation:aurora-drift-a 8.2s ease-in-out infinite alternate}
html.desktop-shadow-demo .desktop-aurora-film i:nth-child(2){background:radial-gradient(ellipse at 62% 40%,#70f7dc65,transparent 55%);animation:aurora-drift-b 10.4s ease-in-out infinite alternate}
html.desktop-shadow-demo .desktop-aurora-film i:nth-child(3){background:radial-gradient(ellipse at 72% 62%,#797dff65,transparent 52%);animation:aurora-drift-c 9.1s ease-in-out infinite alternate}
@keyframes aurora-drift-a{to{transform:translate3d(8%,-5%,0) scale(1.1) rotate(4deg)}}@keyframes aurora-drift-b{to{transform:translate3d(-7%,4%,0) scale(.94) rotate(-5deg)}}@keyframes aurora-drift-c{to{transform:translate3d(-3%,-7%,0) scale(1.08)}}
@keyframes lens-float{from{transform:translate3d(-1%,1%,0) rotate(-1deg)}to{transform:translate3d(1.4%,-1%,0) rotate(1.2deg)}}

html.desktop-shadow-demo .desktop-iridescent-film{inset:0!important;width:100%!important;height:100%!important;transform:none;border-radius:0;-webkit-mask:radial-gradient(ellipse 36% 24% at 50% 51%,#000 8%,#000d 48%,transparent 75%);mask:radial-gradient(ellipse 36% 24% at 50% 51%,#000 8%,#000d 48%,transparent 75%);filter:blur(7px) saturate(1.1);opacity:.62}
html.desktop-shadow-demo .desktop-iridescent-film>*{position:absolute;inset:-45%;display:block}
html.desktop-shadow-demo .desktop-iridescent-film i{background:conic-gradient(from 80deg at 50% 50%,#ff658a55,#ffca7450,#82ffd947,#72bcff52,#bd83ff50,#ff658a55);animation:film-spectrum 8.4s linear infinite}
html.desktop-shadow-demo .desktop-iridescent-film b{background:repeating-radial-gradient(ellipse at 54% 48%,transparent 0 5%,#fff7 5.7% 6.2%,transparent 7% 12%);filter:blur(6px);animation:film-rings 6.8s ease-in-out infinite alternate}
html.desktop-shadow-demo .desktop-iridescent-film em{background:linear-gradient(102deg,transparent 30%,#fff9 47%,#e5fbffb0 50%,transparent 64%);filter:blur(14px);animation:film-glint 5.6s ease-in-out infinite}
@keyframes film-spectrum{to{transform:rotate(360deg) scale(1.04)}}
@keyframes film-rings{from{transform:translate3d(-3%,2%,0) scale(.94);opacity:.24}to{transform:translate3d(4%,-2%,0) scale(1.07);opacity:.5}}
@keyframes film-glint{0%,100%{transform:translateX(-24%);opacity:.12}50%{transform:translateX(25%);opacity:.55}}

html.desktop-shadow-demo .desktop-gsap-prism{inset:0!important;width:100%!important;height:100%!important;clip-path:polygon(14% 47%,37% 32%,64% 34%,87% 46%,79% 68%,49% 73%,20% 64%);filter:saturate(1.22);-webkit-mask:radial-gradient(ellipse 45% 31% at 50% 52%,#000 18%,#000f 52%,transparent 82%);mask:radial-gradient(ellipse 45% 31% at 50% 52%,#000 18%,#000f 52%,transparent 82%)}
html.desktop-shadow-demo .desktop-gsap-prism i{position:absolute;left:12%;width:76%;height:9%;border-radius:50%;filter:blur(12px);mix-blend-mode:screen;background:linear-gradient(90deg,transparent 1%,#ff5f8d66 14%,#ffd36f70 32%,#70ffd667 50%,#62b6ff70 69%,#bd72ff68 86%,transparent 99%);box-shadow:0 0 18px #b9f3ff2b}
html.desktop-shadow-demo .desktop-gsap-prism i:nth-child(1){top:36%}html.desktop-shadow-demo .desktop-gsap-prism i:nth-child(2){top:42%}html.desktop-shadow-demo .desktop-gsap-prism i:nth-child(3){top:48%}html.desktop-shadow-demo .desktop-gsap-prism i:nth-child(4){top:54%}html.desktop-shadow-demo .desktop-gsap-prism i:nth-child(5){top:60%}
html.desktop-shadow-demo .desktop-gsap-prism b{position:absolute;inset:24% auto 20% 18%;width:14%;background:linear-gradient(90deg,transparent,#ffffffd0 46%,#c9f7ffbd 54%,transparent);filter:blur(13px);transform:skewX(-18deg);mix-blend-mode:screen}
html.desktop-shadow-demo .desktop-three-prism{display:none;position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;mix-blend-mode:multiply}
html.desktop-shadow-demo .desktop-svg-water{display:none;position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible;mix-blend-mode:normal;contain:paint}
html.desktop-shadow-demo .desktop-prism-beam{display:none;position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;isolation:isolate}
/* The rejected prism study is disabled; it must not affect the header or stage. */
html.desktop-shadow-demo .desktop-prism-cast{display:none!important}
html.desktop-shadow-demo .experience{position:relative;z-index:3}
html.desktop-shadow-demo .desktop-prism-beam>*{position:absolute;display:block;pointer-events:none;transform-origin:100% 50%;clip-path:polygon(0 35%,0 65%,100% 56%,100% 44%)}
html.desktop-shadow-demo .desktop-prism-beam .beam-core{right:-21%;top:2%;width:92%;height:48%;background:linear-gradient(90deg,transparent 0%,#fff0 27%,#ffffff72 61%,#ffffff12 100%);filter:blur(22px);opacity:.36;transform:rotate(25deg);mix-blend-mode:screen}
html.desktop-shadow-demo .desktop-prism-beam .beam-red{right:-19%;top:2%;width:91%;height:47%;background:linear-gradient(90deg,transparent 23%,#ff9aaa00 42%,#ffb3a854 66%,#ffffff00 100%);filter:blur(17px);opacity:.34;transform:translateY(-1.4%) rotate(24.3deg);mix-blend-mode:screen}
html.desktop-shadow-demo .desktop-prism-beam .beam-gold{right:-19%;top:2%;width:91%;height:47%;background:linear-gradient(90deg,transparent 27%,#ffd47000 47%,#ffe29a58 68%,#ffffff00 100%);filter:blur(16px);opacity:.32;transform:translateY(-.35%) rotate(24.8deg);mix-blend-mode:screen}
html.desktop-shadow-demo .desktop-prism-beam .beam-cyan{right:-19%;top:2%;width:91%;height:47%;background:linear-gradient(90deg,transparent 31%,#8ee4ff00 51%,#9fe9ff50 71%,#ffffff00 100%);filter:blur(17px);opacity:.3;transform:translateY(.85%) rotate(25.3deg);mix-blend-mode:screen}
html.desktop-shadow-demo .desktop-prism-beam .beam-violet{right:-19%;top:2%;width:91%;height:47%;background:linear-gradient(90deg,transparent 35%,#c6aaff00 55%,#cdb9ff40 73%,#ffffff00 100%);filter:blur(18px);opacity:.27;transform:translateY(1.8%) rotate(25.7deg);mix-blend-mode:screen}
html.desktop-shadow-demo .desktop-prism-beam b{right:-2%;top:0;width:15%;height:42%;clip-path:polygon(0 0,100% 16%,100% 86%,0 100%);background:radial-gradient(ellipse at 80% 50%,#ffffffa8,transparent 66%);filter:blur(20px);opacity:.32;mix-blend-mode:screen}
html.desktop-shadow-demo .desktop-water-flow{display:none;position:absolute;z-index:2;pointer-events:none;left:-12%;width:124%;height:24%;top:-25%;overflow:visible;perspective:1000px;transform:translate3d(0,0,0);will-change:transform;contain:layout paint;animation:water-flow-down 10.2s linear infinite}
html.desktop-shadow-demo .desktop-water-flow>*{position:absolute;display:block;inset:0;transform:translateZ(0);backface-visibility:hidden}
html.desktop-shadow-demo .desktop-water-flow i{border-radius:50% 50% 46% 54% / 38% 43% 57% 62%;background:linear-gradient(180deg,transparent 0%,#d8f4f31b 18%,#b8e6e936 46%,#edfdfd42 57%,#a8dadd2b 76%,transparent 100%);mix-blend-mode:multiply;transform:perspective(1000px) rotateX(49deg) rotateZ(-1.2deg) scaleY(1.15)}
html.desktop-shadow-demo .desktop-water-flow b{inset:12% 4%;border-radius:48% 52% 45% 55% / 43% 45% 55% 57%;background:repeating-linear-gradient(180deg,transparent 0 13%,#9acdd116 15%,transparent 17% 27%),linear-gradient(90deg,transparent 4%,#dceff022 38%,#a8d9dc22 56%,transparent 96%);mix-blend-mode:multiply;transform:perspective(1000px) rotateX(55deg) rotateZ(.7deg) scaleY(1.12)}
html.desktop-shadow-demo .desktop-water-flow em{inset:20% 14%;border-radius:50%;background:linear-gradient(90deg,transparent 0,#e9f8f820 43%,#c8e8e723 55%,transparent 100%);mix-blend-mode:screen;transform:perspective(1000px) rotateX(61deg) scaleY(1.1)}
@keyframes water-flow-down{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,470%,0)}}
html.desktop-shadow-demo .shadow-demo-picker{display:flex;position:fixed;left:50%;top:18px;z-index:9999;transform:translateX(-50%);gap:6px;padding:6px;border:1px solid #fff;border-radius:999px;background:#f5f7f3e8;box-shadow:0 10px 30px #40545922;backdrop-filter:blur(14px)}
html.desktop-shadow-demo .shadow-demo-picker button{border:0;border-radius:999px;padding:9px 13px;background:transparent;color:#536365;font:12px/1.2 system-ui,sans-serif;letter-spacing:.04em;cursor:pointer;white-space:nowrap}
html.desktop-shadow-demo .shadow-demo-picker button.active{background:#3f5557;color:#fff}

html[data-shadow="foliage"] .desktop-shadow-study:before{content:'';position:absolute;right:-1%;bottom:1%;width:39%;height:62%;background:url('foliage-shadow.svg?v=4') right center/contain no-repeat;filter:blur(3px);opacity:.14;transform-origin:100% 70%;animation:verified-leaf-motion 7.8s ease-in-out infinite alternate}
@keyframes verified-leaf-motion{0%{transform:translate3d(-1%,1%,0) rotate(-2deg)}45%{transform:translate3d(.4%,-.4%,0) rotate(.6deg)}100%{transform:translate3d(2%,-1.4%,0) rotate(2.4deg)}}

html[data-shadow="solarblind"] .desktop-shadow-study:before{content:'';position:absolute;inset:-24% -12% -18% 12%;background:repeating-linear-gradient(0deg,transparent 0 7.8%,#425d641b 8.2% 9.1%,transparent 9.5% 16%);filter:blur(4px);opacity:.82;transform-origin:50% 0;animation:solar-blind-angle 14s ease-in-out infinite alternate}
html[data-shadow="solarblind"] .desktop-shadow-study i{left:8%;top:-18%;width:76%;height:142%;border:13px solid #425d6410;filter:blur(7px);animation:solar-frame-drift 14s ease-in-out infinite alternate}
html[data-shadow="solarblind"] .desktop-shadow-study b{inset:-12%;background:linear-gradient(119deg,transparent 10%,#ffffff70 31%,transparent 55%);filter:blur(30px);animation:solar-daylight 14s ease-in-out infinite alternate}
@keyframes solar-blind-angle{from{transform:translate3d(-2%,1%,0) rotate(-15deg) skewX(-4deg);opacity:.62}to{transform:translate3d(3%,-1.5%,0) rotate(-11deg) skewX(-2deg);opacity:.9}}
@keyframes solar-frame-drift{from{transform:translateX(-2%) rotate(-15deg) skewX(-4deg)}to{transform:translateX(3%) rotate(-11deg) skewX(-2deg)}}
@keyframes solar-daylight{from{opacity:.2;transform:translateX(-3%)}to{opacity:.42;transform:translateX(4%)}}

html[data-shadow="prism"] .desktop-shadow-study:before{content:none}

html[data-shadow="rain"] .desktop-shadow-study:before{content:'';position:absolute;inset:-8%;background:linear-gradient(118deg,transparent 12%,#ffffff73 38%,transparent 72%);filter:blur(24px);animation:rain-light-drift 8s ease-in-out infinite alternate}
@keyframes rain-light-drift{from{transform:translateX(-4%);opacity:.24}to{transform:translateX(4%);opacity:.43}}

html[data-shadow="cloudlight"] .desktop-shadow-study:before{content:'';position:absolute;inset:-8%;background:radial-gradient(ellipse at 46% 40%,#ffffff85,transparent 50%);filter:blur(24px);animation:cloud-sun-breathe 9s ease-in-out infinite alternate}
@keyframes cloud-sun-breathe{from{transform:translate3d(-5%,-2%,0);opacity:.18}to{transform:translate3d(6%,3%,0);opacity:.64}}

/* B — floor-to-ceiling window: large frame projection with daylight moving
   independently, matching the original site's environmental-shadow language. */
/* Exact pre-foliage site window treatment: reuse the real site layers instead
   of drawing a second imitation window on top of them. */
html[data-shadow="floorwindow"] .desktop-shadow-study{display:none!important}
html[data-shadow="floorwindow"] .world:before{
  display:block!important;
  inset:9% -25% -15%!important;
  background:linear-gradient(90deg,transparent 5%,#758e9b18 12%,transparent 13% 31%,#647f8f25 32% 34%,transparent 35% 54%,#647f8f25 55% 57%,transparent 58% 78%,#758e9b18 79%,transparent 81%)!important;
  filter:blur(6px)!important;
  mix-blend-mode:multiply!important;
  transform-origin:50% 70%!important;
  animation:original-wind-window-frame 12s ease-in-out infinite alternate!important;
}
html[data-shadow="floorwindow"] .world .window-light{
  display:block!important;
  animation:original-wind-window-light 12s ease-in-out infinite alternate!important;
}
@keyframes original-wind-window-frame{from{opacity:.56;transform:rotate(-24deg) skewX(-28deg) translateX(-3%)}to{opacity:.92;transform:rotate(-24deg) skewX(-28deg) translateX(4%)}}
@keyframes original-wind-window-light{from{opacity:.02;transform:rotate(-24deg) skewX(-28deg) translateX(-3%)}to{opacity:.06;transform:rotate(-24deg) skewX(-28deg) translateX(4%)}}

html[data-shadow="curtain"] .desktop-shadow-study:before{content:'';position:absolute;left:-9%;top:-16%;width:82%;height:136%;background:repeating-linear-gradient(96deg,transparent 0 8%,#52686d0b 13%,#405a601d 18%,#60757a0b 24%,transparent 31%);filter:blur(12px);opacity:.92;transform-origin:0 0;animation:curtain-wave 6.8s ease-in-out infinite alternate}
html[data-shadow="curtain"] .desktop-shadow-study i{left:-5%;top:-10%;width:76%;height:126%;background:linear-gradient(112deg,transparent,#ffffff73 35%,transparent 68%);filter:blur(30px);animation:curtain-light-travel 10s ease-in-out infinite alternate}
@keyframes curtain-wave{0%{transform:translate3d(-2%,0,0) skewX(-5deg) scaleX(.97)}50%{transform:translate3d(.7%,-.5%,0) skewX(-2deg) scaleX(1.025)}100%{transform:translate3d(3%,-1%,0) skewX(-6deg) scaleX(.99)}}
@keyframes curtain-light-travel{from{transform:translateX(-4%);opacity:.28}to{transform:translateX(5%);opacity:.5}}

html[data-shadow="mobile"] .desktop-shadow-study:before{content:'';position:absolute;right:17%;top:-8%;width:2px;height:56%;background:#40575d24;filter:blur(1px);transform-origin:50% 0;animation:mobile-pendulum 5.6s ease-in-out infinite alternate}
html[data-shadow="mobile"] .desktop-shadow-study i,html[data-shadow="mobile"] .desktop-shadow-study b,html[data-shadow="mobile"] .desktop-shadow-study em,html[data-shadow="mobile"] .desktop-shadow-study span{right:8%;top:24%;width:16%;height:10%;border-radius:50%;background:#40575d1d;filter:blur(6px);transform-origin:50% -260%;animation:mobile-orbit 5.6s ease-in-out infinite alternate}
html[data-shadow="mobile"] .desktop-shadow-study b{right:23%;top:39%;width:11%;height:15%;border-radius:45% 55%;animation-delay:-1.4s}
html[data-shadow="mobile"] .desktop-shadow-study em{right:11%;top:52%;width:9%;height:9%;animation-delay:-2.8s}
html[data-shadow="mobile"] .desktop-shadow-study span{right:29%;top:59%;width:14%;height:7%;animation-delay:-4.2s}
@keyframes mobile-pendulum{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes mobile-orbit{from{transform:translateX(-12px) rotate(-7deg)}to{transform:translateX(14px) rotate(7deg)}}

html[data-shadow="caustic"] .desktop-shadow-study:before{content:'';position:absolute;inset:-18%;background:radial-gradient(ellipse at 22% 38%,transparent 0 13%,#55707712 15% 17%,transparent 20%),radial-gradient(ellipse at 62% 68%,transparent 0 16%,#55707710 18% 20%,transparent 23%),radial-gradient(ellipse at 80% 22%,transparent 0 10%,#5570770f 12% 15%,transparent 18%);filter:blur(8px);animation:caustic-flow 8.5s ease-in-out infinite alternate}
html[data-shadow="caustic"] .desktop-shadow-study i{inset:-15%;background:conic-gradient(from 20deg at 42% 55%,transparent,#ffffff62,transparent 24%,#ffffff3d,transparent 47%);filter:blur(24px);animation:caustic-rotate 13s linear infinite}
@keyframes caustic-flow{from{transform:translate3d(-3%,-1%,0) scale(1)}to{transform:translate3d(4%,2%,0) scale(1.08)}}
@keyframes caustic-rotate{to{transform:rotate(360deg)}}

html[data-shadow="cloud"] .desktop-shadow-study:before{content:'';position:absolute;left:-48%;top:12%;width:64%;height:48%;border-radius:50%;background:radial-gradient(ellipse,#40575d18 0 34%,transparent 70%);filter:blur(26px);animation:cloud-pass 14s linear infinite}
html[data-shadow="cloud"] .desktop-shadow-study i{left:-35%;top:46%;width:45%;height:29%;border-radius:50%;background:radial-gradient(ellipse,#40575d10,transparent 69%);filter:blur(30px);animation:cloud-pass-secondary 18s linear infinite 3s}
@keyframes cloud-pass{0%{transform:translateX(0) scale(.85);opacity:0}12%{opacity:.8}82%{opacity:.65}100%{transform:translateX(245%) scale(1.12);opacity:0}}
@keyframes cloud-pass-secondary{0%{transform:translateX(0);opacity:0}18%{opacity:.65}82%{opacity:.45}100%{transform:translateX(310%);opacity:0}}
}

/* Demo-only preview fallback: lets the requester inspect the desktop study in a narrow browser without changing the production mobile site. */
@media(max-width:700px){
  html.desktop-shadow-demo .desktop-water-flow{display:none;position:absolute;z-index:2;pointer-events:none;left:-12%;width:124%;height:24%;top:-25%;overflow:visible;perspective:1000px;transform:translate3d(0,0,0);will-change:transform;contain:layout paint;animation:water-flow-down 10.2s linear infinite}
  html.desktop-shadow-demo .desktop-water-flow>*{position:absolute;display:block;inset:0;transform:translateZ(0);backface-visibility:hidden}
  html.desktop-shadow-demo .desktop-water-flow i{border-radius:50% 50% 46% 54% / 38% 43% 57% 62%;background:linear-gradient(180deg,transparent 0%,#d8f4f31b 18%,#b8e6e936 46%,#edfdfd42 57%,#a8dadd2b 76%,transparent 100%);mix-blend-mode:multiply;transform:perspective(1000px) rotateX(49deg) rotateZ(-1.2deg) scaleY(1.15)}
  html.desktop-shadow-demo .desktop-water-flow b{inset:12% 4%;border-radius:48% 52% 45% 55% / 43% 45% 55% 57%;background:repeating-linear-gradient(180deg,transparent 0 13%,#9acdd116 15%,transparent 17% 27%),linear-gradient(90deg,transparent 4%,#dceff022 38%,#a8d9dc22 56%,transparent 96%);mix-blend-mode:multiply;transform:perspective(1000px) rotateX(55deg) rotateZ(.7deg) scaleY(1.12)}
  html.desktop-shadow-demo .desktop-water-flow em{inset:20% 14%;border-radius:50%;background:linear-gradient(90deg,transparent 0,#e9f8f820 43%,#c8e8e723 55%,transparent 100%);mix-blend-mode:screen;transform:perspective(1000px) rotateX(61deg) scaleY(1.1)}
  html.desktop-shadow-demo .desktop-prism-beam .beam-core{right:-48%;top:12%;width:155%;height:46%;transform:rotate(21deg);opacity:.32}
  html.desktop-shadow-demo .desktop-prism-beam .beam-red{right:-46%;top:12%;width:153%;height:45%;transform:translateY(-1.4%) rotate(20.3deg);opacity:.32}
  html.desktop-shadow-demo .desktop-prism-beam .beam-gold{right:-46%;top:12%;width:153%;height:45%;transform:translateY(-.35%) rotate(20.8deg);opacity:.3}
  html.desktop-shadow-demo .desktop-prism-beam .beam-cyan{right:-46%;top:12%;width:153%;height:45%;transform:translateY(.85%) rotate(21.3deg);opacity:.28}
  html.desktop-shadow-demo .desktop-prism-beam .beam-violet{right:-46%;top:12%;width:153%;height:45%;transform:translateY(1.8%) rotate(21.7deg);opacity:.25}
  html.desktop-shadow-demo .desktop-prism-beam b{right:-8%;top:2%;width:27%;height:38%;opacity:.28}
}

/* The zero-height introduction row overlaps the work heading during expansion
   at narrow and tablet widths, including 390px and 768px. */
body.expanded .introduction{visibility:hidden}