/* JM Atelier / Light, paper, people. Original motion direction, October 2026.
   All effects are decorative. Reading order and native scrolling remain intact. */

/* A 300 ms horizon line only. No cover, no entry click, no loading dependency. */
.jm-entering .site-entry {
  overflow: hidden;
  isolation: isolate;
}
.entry-sculpture { position: absolute; width: min(76vw, 550px); aspect-ratio: 1; perspective: 800px; transform-style: preserve-3d; animation: entry-sculpture-reveal 3s cubic-bezier(.16,1,.3,1) both; }
.entry-sculpture i { position: absolute; inset: 16%; border: 1px solid #e1c99b; background: linear-gradient(135deg, #eddbac44, #9265420a 38%, #d9bd8a88 70%, #32211a11); box-shadow: inset 0 0 35px #e9c89018, 0 12px 45px #0005; transform: rotate(45deg) rotateY(25deg); }
.entry-sculpture i:nth-child(2) { inset: 21%; transform: rotate(45deg) rotateY(-35deg) translateZ(45px); opacity: .85; }
.entry-sculpture i:nth-child(3) { inset: 27%; transform: rotate(45deg) rotateX(52deg) translateZ(80px); opacity: .6; }
.entry-sculpture i:nth-child(4) { inset: 7%; transform: rotate(45deg) rotateX(-38deg) translateZ(-60px); opacity: .3; }
.entry-sculpture i:nth-child(5) { inset: 32%; background: #21151a; transform: rotate(45deg) translateZ(110px); opacity: .9; }
.entry-sculpture i:nth-child(6) { inset: 9%; border-color: #f1e7d440; background: none; transform: rotate(45deg) rotateY(70deg); opacity: .5; }
.entry-horizon { position: absolute; width: 85%; height: 1px; bottom: 22%; background: linear-gradient(90deg, transparent, #ebd7a8, transparent); box-shadow: 0 0 32px 4px #b7794e44; animation: entry-horizon-reveal 300ms ease-out both; }
.site-entry__identity { position: relative; z-index: 1; gap: 1.35rem; }
.site-entry .section-mark { width: 92px; height: 92px; }
.site-entry__name { font-size: 1.25rem; letter-spacing: .12em; color: #efdfc4; }
@keyframes atelier-cinematic-entry { 0%,68% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes entry-sculpture-reveal { 0% { opacity: 0; transform: scale(.7) rotate(-24deg); filter: blur(10px); } 30%,72% { opacity: 1; filter: blur(0); } 100% { opacity: 0; transform: scale(1.35) rotate(14deg); } }
@keyframes entry-horizon-reveal { 0% { transform: scaleX(0); opacity: 0; } 50%,75% { transform: scaleX(1); opacity: .8; } 100% { opacity: 0; } }

/* Cinematic architecture gives each banner depth, without putting art over text. */
.cinematic-scene { --scene-rgb: 209,166,109; position: relative; isolation: isolate; overflow: hidden; }
.cinematic-scene--accounts { --scene-rgb: 123,191,182; }
.cinematic-scene--admin { --scene-rgb: 222,179,113; }
.cinematic-scene--global { --scene-rgb: 152,185,212; }
.cinematic-scene--guides { --scene-rgb: 223,156,106; }
.scene-architecture { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; perspective: 900px; }
.scene-architecture__plane { position: absolute; width: 48%; height: 150%; top: -25%; right: -3%; border: 1px solid rgba(var(--scene-rgb), .24); background: linear-gradient(132deg, rgba(var(--scene-rgb), .18), transparent 28%, rgba(var(--scene-rgb), .07) 75%); transform: rotate(-24deg) rotateY(-30deg); }
.scene-architecture__plane--one { animation: scene-plane-drift 18s ease-in-out infinite alternate; }
.scene-architecture__plane--two { width: 26%; right: 13%; top: -30%; transform: rotate(32deg) rotateY(45deg); opacity: .6; animation: scene-plane-return 22s ease-in-out infinite alternate; }
.scene-architecture__plane--three { width: 65%; height: 1px; top: 68%; right: -5%; transform: rotate(-28deg); background: rgba(var(--scene-rgb), .4); box-shadow: 0 0 14px rgba(var(--scene-rgb), .35); }
.scene-architecture__beam { position: absolute; inset: -40% -15%; background: conic-gradient(from 210deg at 75% 55%, transparent 0deg, rgba(var(--scene-rgb), .16) 18deg, transparent 42deg); animation: scene-beam-travel 20s ease-in-out infinite alternate; }
.scene-architecture__orbital { position: absolute; width: min(60vw, 800px); aspect-ratio: 1; right: -7%; top: 8%; border: 1px solid rgba(var(--scene-rgb), .14); border-radius: 50%; transform: rotateX(68deg) rotate(-25deg); box-shadow: inset 0 0 100px rgba(var(--scene-rgb), .08); }
.scene-architecture__light { position: absolute; inset: 0; background: radial-gradient(ellipse at var(--ambient-x, 68%) var(--ambient-y, 65%), rgba(var(--scene-rgb), .2), transparent 55%); opacity: .8; }
.cinematic-scene > .shell, .cinematic-scene > .hero__inner { position: relative; z-index: 1; }
.banner.cinematic-scene { background: linear-gradient(115deg,#241519,#111a20); }
.banner.cinematic-scene > .shell { max-width: var(--shell); }
.banner.cinematic-scene h1 { text-wrap: balance; }
.brand-motion__visual { opacity: .82; }
.cta-band.cinematic-scene { padding-block: clamp(3.5rem, 7vw, 6rem); background: #201318; }
.cta-band.cinematic-scene::before { opacity: .35; }
.cta-band .scene-architecture__plane { width: 26%; height: 280%; top: -100%; }
.cta-band .scene-architecture__orbital { top: -80%; }
.business-stages.cinematic-scene { background: #20171c; }
@keyframes scene-plane-drift { to { transform: translateX(-4%) rotate(-17deg) rotateY(-15deg); } }
@keyframes scene-plane-return { to { transform: translateY(4%) rotate(24deg) rotateY(35deg); } }
@keyframes scene-beam-travel { to { transform: rotate(-9deg) scale(1.08); opacity: .55; } }

/* Impact: real Singapore panorama, clear figures, one deliberate reveal. */
.impact-panorama { position: relative; isolation: isolate; overflow: hidden; min-height: 360px; background: #211b1b; border: 1px solid #9f80594d; }
.impact-panorama__city { position: absolute; inset: -5%; z-index: -2; background: url('/assets/img/brand/singapore-impact-v1.webp') center 62% / cover; filter: saturate(.75); animation: impact-city-drift 24s ease-in-out infinite alternate; }
.impact-panorama::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg,#1713163d,#171316d4 82%), linear-gradient(90deg,#2819196e,transparent); }
.impact-panorama__horizon { position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at var(--ambient-x,60%) var(--ambient-y,40%), #e0b3772b, transparent 65%); }
.impact-panorama .proof-stats--singapore { min-height: 360px; background: none; border: 0; align-items: end; }
.impact-panorama .proof-stats--singapore::before { content: none; }
.impact-panorama .stat { min-height: 275px; padding: clamp(1.35rem, 3vw, 2.7rem); border-color: #ead8b12b; background: transparent; }
.impact-panorama .stat__n { color: #fff4e3; font-size: clamp(2.5rem, 3.8vw, 4rem); line-height: 1.1; }
.impact-panorama .stat__l { color: #f1e7d8; font-size: .68rem; letter-spacing: .06em; max-width: 27ch; }
.impact-panorama .stat__icon { color: #e4cfa3; opacity: .85; top: 1.4rem; }
.is-count-enhanced .impact-number__final { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes impact-city-drift { to { transform: scale(1.07) translateX(-1.5%); } }

/* Real relationships. Logos get a clear mount; approved imagery gets room. */
.home-relationships { background: #eee8df; }
.home-relationships__head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; }
.home-relationships__head h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
.brand-rail { grid-template-columns: 160px minmax(0,1fr); }
.brand-rail__label { font-size: .65rem; line-height: 1.9; padding-inline: 1.5rem; }
.brand-rail__viewport { padding-block: 1.25rem; }
.brand-rail__track { gap: 1.25rem; }
.brand-tile { width: clamp(240px, 23vw, 340px); min-height: 248px; padding: 1.15rem; gap: 1rem; grid-template-rows: 1fr auto; border-color: #9c856338; border-radius: 2px; filter: none; background: #f5f1eb; box-shadow: 0 8px 25px #2d191d08; }
.brand-tile .brand-tile__backdrop img { opacity: .8; transform: scale(1.01); transition: transform 800ms cubic-bezier(.16,1,.3,1); }
.brand-tile__backdrop::after { background: linear-gradient(180deg,#f4ede536 0%,#f4ede54d 35%,#f4ede5f2 76%); }
.brand-tile:has(.brand-tile__backdrop) .brand-tile__visual { align-self: center; min-height: 83px; margin: .5rem .45rem; padding: .75rem 1rem; background: #fffcf6eb; box-shadow: 0 2px 20px #2d191d0b; border: 1px solid #fffcf699; backdrop-filter: blur(5px); }
.brand-tile .brand-tile__visual img { height: 66px; }
.brand-tile__caption { min-height: 50px; border-color: #75634536; }
.brand-tile__name { font-size: 1.1rem; }
.brand-tile__note, .brand-tile:has(.brand-tile__backdrop) .brand-tile__note { color: #51453e; font-size: .61rem; letter-spacing: .03em; }
.brand-tile:hover .brand-tile__backdrop img, .brand-tile:focus-visible .brand-tile__backdrop img { transform: scale(1.07); }
.brand-tile--dark { background: #191516; }
.brand-tile--dark .brand-tile__visual { background: none; }
.brand-tile--dark .brand-tile__note { color: #dacbbd; }
.home-relationships__footer { padding-block: .25rem 1rem; }
.home-relationships .home-relationships__privacy { margin-top: .25rem; text-align: right; color: #65564e; }
.proof-experience > p { font: 400 clamp(1.5rem,2.5vw,2.4rem)/1.35 var(--serif); margin: 0 0 2rem; }
.proof-experience footer { display: grid; gap: .35rem; font-size: .9rem; }
.proof-experience footer span { color: var(--fg-muted); }

/* A storyboard you can actually watch. Six original ten-second walkthroughs. */
.guide-banner.cinematic-scene { min-height: min(70vh, 650px); display: grid; align-content: center; }
.guide-studio { border: 1px solid var(--rule-strong); background: #f3eee7; }
.guide-studio .guide-studio__tabs { border: 0; border-bottom: 1px solid var(--rule-strong); background: #ebe4d9; }
.guide-studio .service-switch__panels { padding: 0; }
.guide-studio .guide-chapter { grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 0; padding: 0; background: #2b1b20; color: #f7efe1; }
.guide-studio .guide-chapter__copy { padding: clamp(1.5rem, 3vw, 3rem); }
.guide-studio .guide-chapter__copy h2 { color: #f7efe1; }
.guide-studio .guide-chapter__copy .eyebrow { color: #d9bc86; }
.guide-studio .guide-chapter__actions > span { color: #d9cbb3; }
.guide-studio .chapter-actions { font-size: .9rem; color: #f0e3d0; }
.guide-studio .chapter-actions li { border-color: #c5a66e38; }
.guide-studio .chapter-actions li::before { color: #d9bc86; }
.guide-studio .chapter-controls { border-color: #c5a66e38; }
.guide-studio .chapter-controls button, .guide-studio .chapter-controls a { color: #eddbb7; }
.guide-film { margin: 0; position: relative; min-width: 0; background: #23171d; color: #f1e4cc; }
.guide-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #23171d; }
.guide-film figcaption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem; color: #ddcdb1; font: .68rem/1.5 var(--sans); letter-spacing: .02em; border-top: 1px solid #c5a66e26; }
.guide-film__play { position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%); border: 1px solid #e5c88b; background: #24151be8; color: #fff1d7; padding: .8rem 1.2rem; font: .85rem var(--sans); cursor: pointer; min-height: 44px; }
.guide-film__play span { margin-left: .65rem; }
.guide-film__play[hidden] { display: none; }
.guide-film__fallback { display: none; padding: 1rem; font-size: .85rem; }
.guide-film.is-film-unavailable .guide-film__fallback { display: block; }
.guide-film__fallback a, .guide-film noscript a { color: #e5c88b; }
.setup-guide-page > .shell > .guide-film { margin: 2rem 0; max-width: 900px; }
.guide-path__scope { padding-top: .5rem; }
.guide-task__number { border-radius: 50%; border: 1px solid #ae915d66; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; font-size: 1rem; }
.guide-task:has(input:checked) { border-color: #8e754466; background: #e9e3d633; }
.guide-task:has(input:checked) .guide-task__number { background: #536650; color: #fffaf0; border-color: #536650; }
.service-diagram li { position: relative; }
.service-diagram li + li::before { content: ''; position: absolute; top: 30%; left: -18%; width: 36%; height: 1px; background: linear-gradient(90deg,transparent,#ba9a68,transparent); transform-origin: left; animation: diagram-trace 3s ease-in-out infinite; }
.service-diagram li:nth-child(3)::before { animation-delay: 1s; }
@keyframes diagram-trace { 0%,100% { transform: scaleX(.3); opacity: .4; } 50% { transform: scaleX(1); opacity: 1; } }
/* The admin hand-off is a visible sequence, not an undifferentiated checklist. */
.admin-board { gap: 1.75rem; }
.admin-task { border-radius: 2px; background: linear-gradient(135deg,#fffaf0,#efe7d9); box-shadow: 0 8px 22px #2d191d08; transition: border-color 250ms, box-shadow 250ms; }
.admin-task:nth-child(2) { background: linear-gradient(135deg,#eee2cf,#faf3e5); }
.admin-task summary { min-height: 190px; }
.admin-task__icon { padding: .5rem; width: 52px; height: 52px; border: 1px solid #9a7d4b40; border-radius: 50%; background: #fffaf078; }
.admin-task:not(:last-child)::after { right: -1.5rem; color: #92713d; animation: admin-hand-off 4s ease-in-out infinite; }
.admin-task:nth-child(2)::after { animation-delay: 1s; }
.admin-task:hover, .admin-task[open] { box-shadow: 0 10px 30px #2d191d13; }
.admin-task:has(summary:focus-visible) { outline: 2px solid var(--burgundy); outline-offset: 4px; }
@keyframes admin-hand-off { 0%,100% { opacity: .4; transform: translateX(-2px); } 50% { opacity: 1; transform: translateX(2px); } }
.article-cover { min-height: 370px; border-radius: 3px; }
.article-cover .article-art__light { opacity: .9; }
.article-glance { border-left: 2px solid var(--bronze); }
.about-name__material { opacity: .65; }
.about-purpose { min-height: 600px; display: grid; align-content: center; }

@media (max-width: 960px) {
  .impact-panorama .proof-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .impact-panorama .stat { min-height: 200px; }
  .impact-panorama .stat__n { font-size: clamp(2.5rem,5vw,3.5rem); }
  .guide-studio .guide-chapter { grid-template-columns: 1fr; }
  .guide-studio .guide-film { max-width: none; }
  .brand-rail { grid-template-columns: 120px minmax(0,1fr); }
}
@media (max-width: 620px) {
  .scene-architecture__plane { right: -25%; width: 70%; opacity: .65; }
  .scene-architecture__orbital { width: 110vw; right: -50%; }
  .scene-architecture__light { opacity: .5; }
  .home-relationships__head { display: block; }
  .brand-rail { grid-template-columns: 1fr; }
  .brand-rail__label { padding: .75rem var(--gutter); }
  .brand-tile { width: 265px; min-height: 228px; }
  .impact-panorama .stat { min-height: 190px; padding: 1.2rem; }
  .impact-panorama .stat__n { font-size: clamp(1.7rem,6.6vw,2.05rem); }
  .impact-panorama .stat__icon { width: 25px; height: 25px; right: 1rem; top: 1rem; }
  .impact-panorama .stat__l { font-size: .75rem; letter-spacing: .015em; }
  .guide-banner.cinematic-scene { min-height: 440px; }
  .guide-film figcaption { font-size: .62rem; }
  .guide-studio .guide-chapter__copy { padding: 1.5rem; }
  .admin-task summary { min-height: 140px; }
  .about-purpose { min-height: 520px; }
}
@media (prefers-reduced-motion: reduce) {
  .jm-entering .site-entry { display: none; }
  .entry-sculpture, .entry-horizon, .scene-architecture__plane, .scene-architecture__beam, .impact-panorama__city, .service-diagram li::before { animation: none !important; }
  .brand-tile .brand-tile__backdrop img { transition: none; transform: none !important; }
  .admin-task { transition: none; }
  .admin-task::after { animation: none !important; }
}
@media print {
  .scene-architecture, .entry-sculpture, .entry-horizon, .guide-film { display: none !important; }
  .impact-panorama { background: white; }
  .impact-panorama__city, .impact-panorama__horizon, .impact-panorama::before { display: none; }
  .impact-panorama .stat__n, .impact-panorama .stat__l { color: black; }
}

/* Performance only: preserve the original art and timing while visible.
   Offscreen decorations yield resources; hovering never pauses the flow. */
.is-motion-idle *, .is-motion-idle::before, .is-motion-idle::after,
.is-motion-idle *::before, .is-motion-idle *::after,
.jm-background-idle body *, .jm-background-idle body *::before,
.jm-background-idle body *::after { animation-play-state: paused !important; }