/* Three palettes in native scroll flow. Static alternatives are the default. */
body.service-website-page.service-movie-page.service-movie-normal-scroll .service-hero__sticky--color-sequence {
  grid-template-rows: auto auto auto 100svh auto;
}
body.service-website-page.service-movie-page.service-movie-normal-scroll .service-hero__sticky--color-sequence > .lumen-sheet { grid-row: 4; }
body.service-website-page.service-movie-page.service-movie-normal-scroll .service-hero__sticky--color-sequence > .service-hero__reverse-film-stage { grid-row: 5; }
#website-color-showcase {
  --color-layout-ready: 1;
  --color-bg: #f5f1e6; --color-paper: #fffdf8; --color-ink: #665943; --color-accent: #ab9874;
  position: relative; grid-column: 1 / -1; grid-row: 3; align-self: start;
  min-width: 0; width: 100%; margin: 0; color: var(--color-ink); background: var(--color-bg);
  font-family: "Noto Sans JP", sans-serif; text-align: left;
}
#website-color-showcase :where(div, p, h2, h3, span, img, figure, article, i) { box-sizing: border-box; }
#website-color-showcase .web-color-stage { display: none; }
#website-color-showcase:is([data-motion-state="starting"], [data-motion-state="running"]) { height: 300svh; }
#website-color-showcase:is([data-motion-state="starting"], [data-motion-state="running"]) > .web-color-stage {
  display: block; position: sticky; top: 0; width: 100%; height: 100svh; overflow: hidden; isolation: isolate;
}
#website-color-showcase:is([data-motion-state="starting"], [data-motion-state="running"]) > .web-color-fallback { display: none; }
#website-color-showcase .web-color-background { position: absolute; inset: 0; z-index: -1; opacity: .4; mix-blend-mode: luminosity; }
#website-color-showcase .web-color-background img { display: block; width: 100%; height: 100%; object-fit: cover; filter: blur(3px); transform: scale(1.03); }
#website-color-showcase .web-color-stage::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(120deg, rgb(255 255 255 / 35%), transparent 60%, rgb(255 255 255 / 15%));
}
#website-color-showcase .web-color-copy { position: absolute; top: 49%; left: 8%; width: 36%; transform: translateY(-50%); z-index: 2; }
/* The Japanese COLOR heading matches WORD; palette names keep their original scale. */
#website-color-showcase h2,
#website-color-showcase .web-color-name { font-family: "Cormorant Garamond", serif; font-weight: 400; }
#website-color-showcase h2 { margin: 0; font-size: clamp(4.75rem, 7.8vw, 7.75rem); letter-spacing: .045em; line-height: .95; }
#website-color-showcase h2 > span { display: block; margin-top: 14px; font-family: "Shippori Mincho B1", serif; font-size: clamp(24px, 2vw, 30px); letter-spacing: .12em; }
#website-color-showcase .web-color-number { margin: 46px 0 18px; font-size: 11px; font-weight: 400; line-height: 1; letter-spacing: .22em; }
#website-color-showcase .web-color-name { max-width: 8em; margin: 0; font-size: clamp(50px, 6.1vw, 92px); line-height: .98; letter-spacing: .025em; }
#website-color-showcase .web-color-japanese { margin: 22px 0 0; font-family: "Shippori Mincho B1", serif; font-size: 15px; line-height: 1.6; letter-spacing: .14em; }
#website-color-showcase .web-color-description { margin: 15px 0 0; font-size: 13px; line-height: 1.9; letter-spacing: .06em; }
#website-color-showcase .web-color-swatches { display: flex; gap: 9px; margin-top: 28px; }
#website-color-showcase .web-color-swatches i { display: block; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgb(0 0 0 / 6%); }
#website-color-showcase .web-color-swatches i:nth-child(1) { background: var(--color-paper); }
#website-color-showcase .web-color-swatches i:nth-child(2) { background: var(--color-bg); }
#website-color-showcase .web-color-swatches i:nth-child(3) { background: var(--color-accent); }
#website-color-showcase .web-color-swatches i:nth-child(4) { background: var(--color-ink); }
#website-color-showcase .web-color-artwork { position: absolute; top: 50%; left: 73%; width: min(34vw, 49svh, 540px); aspect-ratio: 1047 / 1503; transform: translate(-50%, -50%); perspective: 1500px; }
#website-color-showcase .web-color-sheet { width: 100%; height: 100%; transform-origin: 50% 50%; transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); box-shadow: 0 0 1px rgb(40 50 60 / 14%), 0 3px 12px rgb(40 50 60 / 9%); }
#website-color-showcase .web-color-card-front { position: relative; width: 100%; aspect-ratio: 1047 / 1503; container-type: inline-size; background: var(--color-paper); overflow: hidden; }
#website-color-showcase .web-color-design__hero-film::after { content: ""; position: absolute; inset: 0; z-index: 0; background: rgb(255 255 255 / 20%); pointer-events: none; }
#website-color-showcase .web-color-floor { position: absolute; top: 107%; left: 50%; width: 95%; height: 7%; background: var(--color-ink); filter: blur(15px); opacity: .11; transform: translateX(-50%) skewX(-16deg); pointer-events: none; }
#website-color-showcase .web-color-progress { position: absolute; left: 8%; bottom: 6%; display: flex; gap: 8px; width: 140px; }
#website-color-showcase .web-color-progress > button { flex: 1; height: 2px; background: currentColor; opacity: .2; }
#website-color-showcase .web-color-progress > button[aria-current="true"] { opacity: .8; }
#website-color-showcase .web-color-scroll { position: absolute; right: 5%; bottom: 5%; margin: 0; font-size: 9px; letter-spacing: .18em; display: flex; gap: 12px; align-items: center; }
#website-color-showcase .web-color-scroll span { font-size: 20px; }

/* No library, failed media, reduced motion, or no JavaScript: all three remain readable. */
#website-color-showcase .web-color-fallback { padding: clamp(50px, 8vw, 110px) clamp(20px, 6vw, 90px); color: #665943; background: #faf9f5; }
#website-color-showcase .web-color-fallback__intro { text-align: center; margin-bottom: 40px; }
#website-color-showcase .web-color-fallback__intro > p { margin-top: 24px; font-size: 15px; line-height: 1.9; }
#website-color-showcase .web-color-static-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; max-width: 1120px; margin: auto; }
#website-color-showcase .web-color-static { padding: 36px clamp(20px, 4vw, 52px); background: var(--color-bg); color: var(--color-ink); text-align: center; }
#website-color-showcase .web-color-static h3 { margin: 0; font-family: "Cormorant Garamond", serif; font-size: clamp(28px, 3vw, 42px); font-weight: 400; letter-spacing: .04em; }
#website-color-showcase .web-color-static > p { margin: 10px 0 24px; font-size: 13px; line-height: 1.9; }
#website-color-showcase .web-color-static__sheet { width: 100%; max-width: 330px; margin: auto; box-shadow: 0 2px 12px rgb(40 50 60 / 9%); }
#website-color-showcase .web-color-static .web-color-static__caption { margin: 24px 0 0; }
#website-color-showcase [data-color-theme="ecru"] { --color-bg: #f5f1e6; --color-paper: #fffdf8; --color-ink: #665943; --color-accent: #ab9874; }
#website-color-showcase [data-color-theme="ocean"] { --color-bg: #e7f2f6; --color-paper: #fcfeff; --color-ink: #204e68; --color-accent: #477e98; }
#website-color-showcase [data-color-theme="green"] { --color-bg: #edf2e6; --color-paper: #fdfef9; --color-ink: #3c5944; --color-accent: #718c66; }
#website-color-showcase [data-color-theme="pearl"] { --color-bg: #f5ebe5; --color-paper: #fffaf7; --color-ink: #755d50; --color-accent: #b0937e; }

@media (max-width: 768px) and (min-height: 601px) {
  #website-color-showcase .web-color-copy { top: max(76px, 9svh); left: 22px; right: 22px; width: auto; text-align: center; transform: none; }
  #website-color-showcase h2 { font-size: 24px; }
  #website-color-showcase h2 > span { margin-top: 8px; font-size: 14px; }
  #website-color-showcase .web-color-number { margin: 23px 0 12px; font-size: 10px; }
  #website-color-showcase .web-color-name { max-width: none; font-size: clamp(32px, 10.2vw, 58px); line-height: 1; white-space: nowrap; }
  #website-color-showcase .web-color-japanese { margin-top: 10px; font-size: 12px; }
  #website-color-showcase .web-color-description { margin-top: 8px; font-size: 11px; }
  #website-color-showcase .web-color-swatches { justify-content: center; margin-top: 14px; gap: 8px; }
  #website-color-showcase .web-color-swatches i { width: 19px; height: 19px; }
  #website-color-showcase .web-color-artwork { top: 69%; left: 50%; width: min(63vw, 30svh); }
  #website-color-showcase .web-color-progress { left: 22px; bottom: 4%; width: 95px; }
  #website-color-showcase .web-color-scroll { right: 22px; bottom: 3%; font-size: 8px; }
}
@media (max-height: 700px) and (min-width: 769px), (max-height: 600px) {
  #website-color-showcase .web-color-copy { left: 7%; }
  #website-color-showcase h2 { font-size: 23px; }
  #website-color-showcase h2 > span { font-size: 13px; margin-top: 8px; }
  #website-color-showcase .web-color-number { margin-top: 22px; margin-bottom: 12px; }
  #website-color-showcase .web-color-name { font-size: clamp(26px, 5.5vw, 56px); }
  #website-color-showcase .web-color-japanese { margin-top: 13px; font-size: 12px; }
  #website-color-showcase .web-color-description { margin-top: 10px; font-size: 11px; }
  #website-color-showcase .web-color-swatches { margin-top: 16px; }
  #website-color-showcase .web-color-swatches i { width: 20px; height: 20px; }
  #website-color-showcase .web-color-artwork { width: min(32vw, 46svh); }
}
@media (max-width: 600px) {
  #website-color-showcase .web-color-static-grid { grid-template-columns: minmax(0, 1fr); }
}
#website-color-showcase .web-color-static__simple { display: none; }
#website-color-showcase img[hidden] { display: none !important; }
@supports not (font-size: 1cqw) {
  #website-color-showcase .web-color-static__simple { display: block; width: 100%; height: auto; }
  #website-color-showcase .web-color-static__sheet { display: none; }
  #website-color-showcase .web-color-static::after { content: ""; display: block; height: 70px; margin-top: 20px; background: linear-gradient(90deg, var(--color-paper) 33%, var(--color-accent) 33%, var(--color-accent) 66%, var(--color-ink) 66%); }
}

/* Autonomous turn / floating sheet. No overflow or filtering on 3D ancestors. */
#website-color-showcase .web-color-float { width:100%; height:100%; animation:color-paper-float 6s ease-in-out infinite; animation-play-state:paused; transform-style:preserve-3d; }
#website-color-showcase[data-color-visible="true"] .web-color-float { animation-play-state:running; }
#website-color-showcase .web-color-sheet { box-shadow:none; transform-style:preserve-3d; }
#website-color-showcase .web-color-turn { position:relative; width:100%;height:100%; transform-style:preserve-3d; transform:rotateY(0deg); }
#website-color-showcase .web-color-face { position:absolute;inset:0; -webkit-backface-visibility:hidden;backface-visibility:hidden; box-shadow:0 0 1px rgb(40 50 60 / 14%),0 3px 12px rgb(40 50 60 / 9%); }
#website-color-showcase .web-color-face--front { background:var(--color-paper); transform:translateZ(.5px); }
#website-color-showcase .web-color-face--back { display:flex;flex-direction:column;align-items:center;justify-content:center; gap:3cqw; transform:rotateY(180deg) translateZ(.5px); background:linear-gradient(145deg,var(--back-accent,#ab9874),var(--back-ink,#665943) 72%); color:#fff;container-type:inline-size; }
#website-color-showcase .web-color-back-logo {display:flex;align-items:flex-start;font:200 12cqw/.9 "Noto Sans JP",sans-serif;letter-spacing:.15em;}
#website-color-showcase .web-color-back-logo > span {font-size:.6em;margin-top:-.08em;letter-spacing:0;}
#website-color-showcase .web-color-back-name {font:400 2cqw/1.5 "Noto Sans JP",sans-serif;letter-spacing:.23em;margin-top:6cqw;}
#website-color-showcase .web-color-design { width:100%;height:100%; }
#website-color-showcase .web-color-design[hidden] {display:none!important;}
#website-color-showcase .web-color-floor {animation:color-floor-float 6s ease-in-out infinite;animation-play-state:paused;}
#website-color-showcase[data-color-visible="true"] .web-color-floor {animation-play-state:running;}
#website-color-showcase .web-color-progress > button {appearance:none; min-width:24px; height:26px; padding:0; border:0; border-top:2px solid currentColor; border-radius:0; background:transparent; color:inherit; cursor:pointer;}
#website-color-showcase .web-color-progress > button:focus-visible {outline:2px solid currentColor;outline-offset:3px;}
#website-color-showcase .web-color-scroll {color:inherit;text-decoration:none;font-size:10px;line-height:1.5;}
#website-color-showcase .web-color-scroll:focus-visible {outline:2px solid currentColor;outline-offset:4px;}
@keyframes color-paper-float {0%,100%{transform:translateY(8px) scale(.97);}50%{transform:translateY(-20px) scale(1.035);}}
@keyframes color-floor-float {0%,100%{opacity:.12;scale:1;}50%{opacity:.065;scale:.92;}}
@media (max-width:768px) { @keyframes color-paper-float {0%,100%{transform:translateY(6px) scale(.98);}50%{transform:translateY(-15px) scale(1.03);}} }
@media(prefers-reduced-motion:reduce) { #website-color-showcase .web-color-float,#website-color-showcase .web-color-floor{animation:none;} }

/* Match the SNS area's solid color surface and its two restrained shadow gradients. */
#website-color-showcase {background:var(--color-ink);}
#website-color-showcase .web-color-stage {background-color:var(--color-ink);color:#fff;}
#website-color-showcase .web-color-background {display:none;}
#website-color-showcase .web-color-stage::after {z-index:0;background:linear-gradient(110deg,rgba(12,16,14,.2),transparent 48%),linear-gradient(0deg,rgba(12,16,14,.12),transparent 38%);}
#website-color-showcase .web-color-copy,#website-color-showcase .web-color-progress,#website-color-showcase .web-color-scroll {color:#fff;z-index:2;}
#website-color-showcase .web-color-artwork {z-index:1;}
#website-color-showcase .web-color-swatches i {border-color:rgba(255,255,255,.28);}
#website-color-showcase .web-color-floor {background:#0c100e;}
#website-color-showcase .web-color-fallback {background:#665943;color:#fff;}

/* Keep the closed header readable only while it crosses this dark surface. */
body.service-website-page.is-website-color-surface.is-home-header-surface-dark .eluna-global-header:not(.is-menu-open) {color:#fff;}

/* Center the desktop composition within matching outer margins. */
@media (min-width: 769px) {
  #website-color-showcase {
    --color-desktop-gutter: max(14vw, calc((100vw - 1240px) / 2));
    --color-desktop-art-width: min(34vw, 49svh, 540px);
  }
  #website-color-showcase .web-color-copy {
    left: var(--color-desktop-gutter);
    width: min(36vw, calc(100% - var(--color-desktop-gutter) - var(--color-desktop-gutter) - var(--color-desktop-art-width) - 5vw));
  }
  #website-color-showcase .web-color-artwork {
    left: auto;
    right: var(--color-desktop-gutter);
    width: var(--color-desktop-art-width);
    transform: translateY(-50%);
  }
  #website-color-showcase .web-color-progress { left: var(--color-desktop-gutter); }
  #website-color-showcase .web-color-scroll { right: var(--color-desktop-gutter); }
}
@media (min-width: 769px) and (max-height: 700px) {
  #website-color-showcase { --color-desktop-art-width: min(32vw, 46svh); }
}

/* The existing turn timeline controls the text fade without another timer. */
#website-color-showcase .web-color-copy > :is(.web-color-number, .web-color-name, .web-color-japanese, .web-color-description) {
  opacity: var(--color-copy-opacity, 1);
}
@media (prefers-reduced-motion: reduce) {
  #website-color-showcase .web-color-copy > :is(.web-color-number, .web-color-name, .web-color-japanese, .web-color-description) { opacity: 1; }
}

/* Compact heading, English design names restored; katakana stays collapsed. */
#website-color-showcase .web-color-copy > .web-color-japanese { display: none; }
@media (min-width: 769px) {
  #website-color-showcase .web-color-copy > .web-color-description { display: block; }
  #website-color-showcase .web-color-copy > .web-color-name { display: block; }
  #website-color-showcase .web-color-copy h2 { font-size: clamp(30px, 3.2vw, 48px); }
  #website-color-showcase .web-color-copy h2 > span { font-size: clamp(15px, 1.4vw, 20px); }
  #website-color-showcase .web-color-artwork { right: calc(var(--color-desktop-gutter) + clamp(20px, 3vw, 48px)); }
}
@media (min-width: 901px) {
  #website-color-showcase .web-color-copy { top: 45%; }
}
@media (min-width: 901px) and (max-height: 700px) {
  #website-color-showcase .web-color-copy { top: calc(47% + 25px); }
  #website-color-showcase .web-color-copy .web-color-number { margin-top: 42px; }
}
@media (min-width: 901px) and (min-height: 701px) {
  #website-color-showcase .web-color-copy { top: calc(45% + 40px); }
  #website-color-showcase .web-color-copy .web-color-number { margin-top: 55px; }
}