/* Second-screen refinement only. The approved full-page controller is unchanged. */
:is(#atelier,.atelier-echo) .fp-scroll { background:var(--ink-deep); overflow:clip; }
:is(#atelier,.atelier-echo) .manifesto {
  background:var(--ink-deep);
  height:100%;
  min-height:0;
  overflow:clip;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:clamp(24px,5vh,54px) max(5vw,28px) 24px;
  text-align:center;
}
:is(#atelier,.atelier-echo) .manifesto-grid { display:contents; }
:is(#atelier,.atelier-echo) h2 {
  position:relative;
  top:-14px;
  color:#fff;
  grid-row:2;
  width:100%;
  max-width:1320px;
  justify-self:center;
  margin:0;
  font-size:clamp(46px,min(7.4vw,10.5vh),102px);
  line-height:1.04;
  letter-spacing:-.045em;
  text-align:center;
  text-wrap:balance;
  opacity:1;
}
:is(#atelier,.atelier-echo) .atelier-title-line {
  display:block;
  max-width:100%;
  white-space:nowrap;
  letter-spacing:-.045em;
  line-height:1.04;
  opacity:1;
}
:is(#atelier,.atelier-echo) .atelier-title-ending { display:inline-block; }
:is(#atelier,.atelier-echo) .atelier-carousel {
  --card-width:min(66vw,150cqh,1100px);
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  width:100%;
  max-width:1320px;
  position:relative;
  container-type:size;
  margin-top:clamp(8px,1.5vh,18px);
  padding-bottom:32px;
  opacity:1;
  outline-offset:4px;
}
:is(#atelier,.atelier-echo) .atelier-stage {
  flex:1;
  min-height:0;
  position:relative;
  container-type:size;
}
:is(#atelier,.atelier-echo) .atelier-orbit { position:absolute; inset:0; perspective:1100px; perspective-origin:50% 45%; z-index:1; }
:is(#atelier,.atelier-echo) .atelier-ring {
  --ring-radius:calc(var(--card-width) * 1.12);
  width:100%;
  height:100%;
  position:relative;
  top:-2%;
  transform-style:preserve-3d;
  transform:translateZ(calc(var(--ring-radius) * -1)) rotateY(var(--ring-angle,0deg));
  will-change:transform;
}
:is(#atelier,.atelier-echo) .atelier-card {
  position:absolute;
  left:50%;
  top:50%;
  width:var(--card-width);
  height:calc(var(--card-width) * 2 / 3);
  margin:0;
  overflow:hidden;
  transform:translate(-50%,-50%) rotateY(calc(var(--card-index) * 60deg)) translateZ(var(--ring-radius));
  backface-visibility:hidden;
  will-change:transform,opacity;
  opacity:calc(var(--card-opacity,1) * var(--card-entry-opacity,1));
  cursor:pointer;
}
:is(#atelier,.atelier-echo) .atelier-card img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  user-select:none;
}
:is(#atelier,.atelier-echo) .atelier-card img[src$="celebration.jpg"] { object-position:center 25%; }
:is(#atelier,.atelier-echo) .atelier-emblem {
  position:absolute;
  top:48%;
  left:50%;
  width:min(102cqh,74vw,880px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:#fff;
  mask-image:url('./images/atelier-emblem-white-v2.png');
  mask-mode:luminance;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
  z-index:0;
  pointer-events:none;
}
:is(#atelier,.atelier-echo) .atelier-controls {
  position:static;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  flex:none;
  margin-top:0;
  height:0;
}
:is(#atelier,.atelier-echo) .atelier-caption {
  position:absolute;
  left:0;
  bottom:12px;
  z-index:3;
  flex:none;
  align-self:flex-start;
  width:min(320px,calc((100cqw - var(--card-width)) / 2 - 24px));
  min-height:0;
  margin-top:0;
  text-align:left;
  color:#fff;
}
:is(#atelier,.atelier-echo) .atelier-caption::before {
  content:"";
  position:absolute;
  inset:-18px -16px -4px -10px;
  z-index:-1;
  background:linear-gradient(to bottom,transparent,var(--ink-deep) 22px);
  pointer-events:none;
}
body:has(main[data-active-page="atelier"]) .preview-badge { left:auto; right:10px; }
:is(#atelier,.atelier-echo) .atelier-caption[data-caption-state="hidden"] { opacity:0; }
:is(#atelier,.atelier-echo) .atelier-caption-meta {
  margin:0 0 7px;
  font:9px/1.3 var(--sans);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#ffffff94;
}
:is(#atelier,.atelier-echo) .atelier-caption-title {
  margin:0 0 7px;
  color:#fff;
  font-size:clamp(20px,1.7vw,26px);
  line-height:1.3;
  letter-spacing:-.025em;
  white-space:normal;
}
:is(#atelier,.atelier-echo) .caption-word { display:inline-block; white-space:nowrap; }
/* Keep the vertical reveal without cutting the side bearings of each glyph. */
:is(#atelier,.atelier-echo) .caption-char { display:inline-block; overflow:visible; clip-path:inset(-.1em -.15em); vertical-align:top; }
:is(#atelier,.atelier-echo) .caption-letter {
  display:inline-block;
  transform:translateY(115%);
  opacity:0;
  transition:transform 160ms ease,opacity 160ms ease;
}
:is(#atelier,.atelier-echo) .atelier-caption.is-ready .caption-letter {
  transform:translateY(0);
  opacity:1;
  transition:transform 440ms cubic-bezier(.2,.7,.2,1),opacity 320ms ease;
  transition-delay:calc(var(--char-index) * 22ms);
}
:is(#atelier,.atelier-echo) .atelier-caption-description {
  margin:0;
  max-width:46ch;
  min-height:36px;
  color:#ffffffb3;
  font:12px/1.5 var(--sans);
  opacity:1;
}
:is(#atelier,.atelier-echo) .atelier-caption[data-caption-motion="static"] .caption-letter { transform:none; opacity:1; transition:none; }
:is(#atelier,.atelier-echo) .atelier-caption[data-caption-motion="static"] .atelier-caption-description { opacity:1; transition:none; }
:is(#atelier,.atelier-echo) .atelier-controls button {
  display:grid;
  place-items:center;
  min-width:32px;
  height:32px;
  padding:0;
  color:#e8d9b8;
  background:none;
  border:0;
  cursor:pointer;
  font:24px/1 Georgia,serif;
}
:is(#atelier,.atelier-echo) .atelier-controls button:disabled { opacity:.25; cursor:default; }
:is(#atelier,.atelier-echo) .atelier-controls :is(.atelier-prev,.atelier-next) {
  position:absolute;
  top:48%;
  transform:translateY(-50%);
  z-index:4;
  width:52px;
  height:72px;
  border:1px solid #b7a16b66;
  background:#071f1acc;
  font-size:50px;
}
:is(#atelier,.atelier-echo) .atelier-prev { left:max(16px,3vw); }
:is(#atelier,.atelier-echo) .atelier-next { right:max(16px,3vw); }
:is(#atelier,.atelier-echo) .atelier-pagination { position:absolute; bottom:-12px; left:50%; transform:translateX(-50%); z-index:4; display:flex; flex-direction:column; align-items:center; gap:2px; width:max-content; }
:is(#atelier,.atelier-echo) .atelier-dots { display:grid; grid-template-columns:repeat(6,24px); gap:3px; justify-content:center; margin:0; padding:0; }
:is(#atelier,.atelier-echo) .atelier-discover { display:flex; flex-direction:column; align-items:center; gap:0; color:#e8d9b8b3; text-decoration:none; font:9px/1.4 var(--sans); letter-spacing:.12em; white-space:nowrap; padding:0 12px 3px; }
:is(#atelier,.atelier-echo) .atelier-discover:hover { color:#fff; }
:is(#atelier,.atelier-echo) .atelier-discover-arrow { font:22px/1.1 var(--sans); animation:atelier-hint-down 1.8s ease-in-out infinite; }
@keyframes atelier-hint-down { 0%,100% { transform:translateY(0); opacity:.65; } 55% { transform:translateY(3px); opacity:1; } }
@media(prefers-reduced-motion:reduce) { :is(#atelier,.atelier-echo) .atelier-discover-arrow { animation:none; } }
:is(#atelier,.atelier-echo) .atelier-dots button { min-width:24px; }
:is(#atelier,.atelier-echo) .atelier-dots button::before {
  content:"";
  width:5px;
  height:5px;
  border:1px solid #b7a16b;
  border-radius:50%;
  opacity:.6;
}
:is(#atelier,.atelier-echo) .atelier-dots button[aria-current="true"]::before { background:#e8d9b8; opacity:1; }
:is(#atelier,.atelier-echo) .atelier-status {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  clip-path:inset(50%);
  overflow:hidden;
  white-space:nowrap;
}
:is(#atelier,.atelier-echo)[data-carousel-version] .fp-scroll { touch-action:pinch-zoom; }
:is(#atelier,.atelier-echo)[data-reveal-state="waiting"] :is(.atelier-orbit,.atelier-controls,.atelier-emblem) { opacity:0; transition:none; }
:is(#atelier,.atelier-echo)[data-reveal-state="visible"] .atelier-emblem { opacity:1; transition:opacity 1000ms ease 2220ms; }
:is(#atelier,.atelier-echo)[data-reveal-state="visible"] .atelier-orbit { opacity:1; transition:none; }
:is(#atelier,.atelier-echo)[data-reveal-state="visible"] .atelier-controls { opacity:1; transition:opacity 400ms ease 3820ms; }
:is(#atelier,.atelier-echo)[data-reveal-state="visible"][data-carousel-intro="cancelled"] .atelier-controls { opacity:1; transition:none; }
:is(#atelier,.atelier-echo)[data-reveal-state="static"] :is(.atelier-orbit,.atelier-controls,.atelier-emblem) { opacity:1; transition:none; }
:is(#atelier,.atelier-echo) [data-carousel-mode="reduced"] .atelier-ring { transform:none; }
:is(#atelier,.atelier-echo) [data-carousel-mode="reduced"] .atelier-card { transform:translate(-50%,-50%); opacity:0; }
:is(#atelier,.atelier-echo) [data-carousel-mode="reduced"] .atelier-card.is-active { opacity:1; }
:is(#atelier,.atelier-echo) [data-carousel-mode="reduced"] .atelier-card { height:calc(var(--card-width) * 2 / 3); top:50%; }
@media (max-height:550px) {
  :is(#atelier,.atelier-echo) .manifesto { padding-top:18px; padding-bottom:12px; }
  :is(#atelier,.atelier-echo) h2 { font-size:clamp(32px,8vh,55px); }
  :is(#atelier,.atelier-echo) .atelier-carousel { margin-top:14px; }
  :is(#atelier,.atelier-echo) .atelier-controls { margin-top:0; height:0; }
}
:is(#atelier,.atelier-echo)[data-reveal-state="waiting"] .atelier-title-line {
  opacity:0;
  transition:none;
}
:is(#atelier,.atelier-echo)[data-reveal-state="visible"] .atelier-title-line {
  opacity:1;
  transition:opacity 900ms cubic-bezier(.33,0,.67,1);
}
:is(#atelier,.atelier-echo)[data-reveal-state="visible"] .atelier-title-line + .atelier-title-line { transition-delay:1200ms; }
:is(#atelier,.atelier-echo)[data-reveal-state="static"] .atelier-title-line { opacity:1; transition:none; }
@media (prefers-reduced-motion:reduce) {
  :is(#atelier,.atelier-echo)[data-reveal-state] .atelier-title-line { opacity:1; transition:none; }
  :is(#atelier,.atelier-echo)[data-reveal-state] :is(.atelier-orbit,.atelier-controls,.atelier-emblem) { opacity:1; transition:none; }
  :is(#atelier,.atelier-echo) .caption-letter { transform:none; opacity:1; transition:none!important; }
  :is(#atelier,.atelier-echo) .atelier-caption-description { opacity:1; transition:none!important; }
}
@media (max-width:760px) {
  :is(#atelier,.atelier-echo) .manifesto {
    padding:clamp(24px,5vh,46px) 22px 26px;
  }
  :is(#atelier,.atelier-echo) h2 { font-size:clamp(42px,11.6vw,72px); line-height:1.06; }
  :is(#atelier,.atelier-echo) .atelier-carousel { --card-width:min(86vw,150cqh,680px); margin-top:8px; padding-bottom:62px; }
  /* A six-card ring needs radius > width * sqrt(3)/2 to avoid intersection. */
  :is(#atelier,.atelier-echo) .atelier-ring { --ring-radius:calc(var(--card-width) * .92); }
  :is(#atelier,.atelier-echo) .atelier-card { height:calc(var(--card-width) * 2 / 3); }
  :is(#atelier,.atelier-echo) .atelier-emblem { width:min(100vw,102cqh); }
  :is(#atelier,.atelier-echo) .atelier-orbit { perspective:900px; }
  :is(#atelier,.atelier-echo) .atelier-controls :is(.atelier-prev,.atelier-next) { width:34px; height:54px; font-size:38px; top:55%; }
  :is(#atelier,.atelier-echo) .atelier-prev { left:5px; }
  :is(#atelier,.atelier-echo) .atelier-next { right:5px; }
  :is(#atelier,.atelier-echo) .atelier-caption { position:relative; bottom:auto; width:100%; min-height:90px; margin-top:14px; }
  :is(#atelier,.atelier-echo) .atelier-caption::before { display:none; }
}
@media (max-width:760px) and (max-height:550px) {
  :is(#atelier,.atelier-echo) .manifesto { padding-top:16px; padding-bottom:12px; }
  :is(#atelier,.atelier-echo) h2 { font-size:clamp(30px,8vh,42px); }
  :is(#atelier,.atelier-echo) .atelier-carousel { margin-top:14px; }
  :is(#atelier,.atelier-echo) .atelier-caption { min-height:70px; margin-top:7px; }
  :is(#atelier,.atelier-echo) .atelier-caption-title { font-size:19px; margin-bottom:4px; }
  :is(#atelier,.atelier-echo) .atelier-caption-description { font-size:11px; min-height:28px; }
}