/* Continuous choreography; wheel, touch, keyboard and scrollbar stay native. */
.ix-cinematic .ix-intro { height: calc(var(--ix-vh) * 3.2); }
.ix-cinematic .ix-stage { height: var(--ix-vh); min-height: 0; }
.ix-cinematic .ix-sky { transform: none; opacity: 1; background-image: url('/assets/img/interactive/clouds-detail.webp'); }
.ix-cinematic .ix-vignette { display: none; }
/* A transparent opening reveals one viewport-sized sky. No bitmap inherits the rim zoom. */
.ix-cinematic .ix-portal {
    position: relative;
    background: transparent;
    box-shadow: 0 0 0 2px #050608, 0 0 0 7px #171a20, 0 0 0 10px #0d0f14, 0 0 0 150vmax #090b0f;
}
.ix-cinematic .ix-portal-rim { position: relative; background: transparent; box-shadow: 0 0 0 3px #38424f; }
.ix-cinematic .ix-portal-glass { background: transparent; box-shadow: inset 0 0 12px #0008; }
.ix-cinematic .ix-portal-clouds { display: none; }
.ix-cinematic .ix-portal::before,
.ix-cinematic .ix-portal-rim::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(125deg, #121722 6%, #606b77 23%, #111720 43%, #465366 61%, #a9a69b 79%, #151d28 96%);
    padding: 24px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}
.ix-cinematic .ix-portal-rim::before { padding: 13px; background: linear-gradient(135deg, #667483, #b0a993 32%, #333b45 49%, #d5c9ac 76%, #465365); }
.ix-cloud-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 800ms ease; pointer-events: none; }
.ix-cloud-video.is-playing { opacity: 1; }
.ix-cinematic .ix-world-copy h2 { transform: translateY(calc((1 - var(--ix-world-opacity)) * 50px)); }
.ix-cinematic .ix-hero-copy { will-change: opacity, transform; }
.ix-cinematic .ix-shutter { background: linear-gradient(115deg, #121822, #313a46 48%, #131a24); }
.ix-scroll-track { position: relative; }
.ix-pinned .ix-track-about { height: calc(var(--ix-vh) * 2.7); background: #101319; }
.ix-pinned .ix-track-work { height: calc(var(--ix-vh) * 5); background: #0a0d13; }
.ix-pinned .ix-scroll-track > .ix-section {
    position: sticky;
    top: var(--ix-header);
    height: var(--ix-vh);
    min-height: 0;
    overflow: hidden;
}
.ix-pinned .ix-about-layout { padding-top: 11vh; padding-bottom: 3vh; }
.ix-page.ix-enhanced :is(.ix-about-layout, .ix-principles, .ix-craft-layout, .ix-work-heading) {
    opacity: 1; transform: none; transition: none;
}
.ix-page #ix-main .ix-reveal-word { color: inherit; opacity: var(--ix-word, 1); }
.ix-cinematic .ix-about { isolation: isolate; }
.ix-motion-type {
    display: none;
    position: absolute;
    left: 0; top: 19%;
    white-space: nowrap;
    font-family: Georgia, serif;
    font-size: clamp(110px, 17vw, 280px);
    line-height: 1; letter-spacing: -.07em;
    color: transparent; -webkit-text-stroke: 1px #b6d2fc16;
    pointer-events: none; z-index: -1;
    transform: translateX(var(--ix-type-x, 0%));
}
.ix-cinematic .ix-motion-type { display: block; }
.ix-page .ix-orb { width: min(39vw, 570px); margin-left: -4vw; }
.ix-orb.ix-has-particles > span:not(.ix-orbit-label) { display: none; }
.ix-particles { position: absolute; inset: 0; width: 100%; height: 100%; }
.ix-cinematic .ix-particles { transform: scale(var(--ix-orbit-scale, 1)); }
.ix-orb.ix-has-particles i { font-size: clamp(60px, 7vw, 108px); opacity: .85; z-index: 1; }
.ix-orb .ix-orbit-label {
    position: absolute; inset: auto 0 7%;
    border: 0; border-radius: 0; box-shadow: none; transform: none;
    text-align: center; font-size: 7px; letter-spacing: .22em; color: #9dbee4;
}
.ix-page .ix-work-showcase { transform-style: preserve-3d; }
.ix-enhanced .ix-browser:not(.ix-card-active) { display: none; }
.ix-pinned .ix-work-showcase {
    height: calc(var(--ix-vh) * .53); margin-top: 0; padding: 0; perspective: 1500px;
}
.ix-pinned .ix-browser {
    display: block;
    position: absolute; top: 50%; left: 50%;
    width: min(66vw, 980px); max-width: none;
    transform: translate(-50%, -50%) translateX(var(--ix-card-x, 0%)) translateY(var(--ix-card-y, 0px)) rotateY(var(--ix-card-turn, 0deg)) rotateX(var(--ix-card-tilt, 0deg)) scale(var(--ix-card-scale, 1));
    opacity: var(--ix-card-alpha, 1); transition: none;
    will-change: transform; backface-visibility: hidden;
}
.ix-pinned .ix-browser img { height: calc(var(--ix-vh) * .42); }
.ix-pinned .ix-browser:not(.ix-card-active) { pointer-events: none; }
.ix-pinned .ix-work-heading { transform: translateY(var(--ix-work-title-y, 0px)); pointer-events: none; }
.ix-pinned .ix-work-bottom { position: absolute; bottom: 45px; left: 6%; right: 6%; z-index: 3; background: #0a0d13e8; padding-inline: 12px; }
.ix-pinned .ix-work-halo { background: radial-gradient(ellipse, #5b91e940, transparent 67%); }
.ix-wireframe {
    display: none;
    position: absolute; inset: 30px 0 0; padding: 4%;
    background-color: #0b1b2d;
    background-image: linear-gradient(#90bcea12 1px, transparent 1px), linear-gradient(90deg, #90bcea12 1px, transparent 1px);
    background-size: 20px 20px;
    clip-path: inset(0 var(--ix-wire, 100%) 0 0);
    color: #bddbff; pointer-events: none;
}
.ix-pinned .ix-wireframe { display: block; }
.ix-wire-nav { display: flex; justify-content: space-between; border-bottom: 1px solid #9dcbff77; padding-bottom: 12px; font-size: 9px; letter-spacing: .12em; }
.ix-wire-hero { display: flex; justify-content: space-between; align-items: center; height: 56%; border: 1px solid #9dcbff55; margin-top: 12px; padding: 15px; }
.ix-wire-hero span { font-size: clamp(20px, 3vw, 48px); line-height: 1; font-weight: 250; letter-spacing: -.04em; }
.ix-wire-hero i { font-size: 70px; font-style: normal; font-weight: 100; }
.ix-wire-grid { display: flex; gap: 15px; height: 15%; margin-top: 12px; }
.ix-wire-grid span { border: 1px solid #9dcbff55; flex: 1; }
.ix-wireframe small { display: block; font-size: 7px; letter-spacing: .2em; margin-top: 10px; }
.ix-cinematic .ix-blueprint { mask-image: none; background-size: 24px 24px; }
.ix-cinematic .ix-blueprint-window { transform: rotate(var(--ix-plan-turn, -18deg)) skewY(8deg); }
.ix-cinematic .ix-blueprint-window i { transform: translate(var(--ix-plan-spread, 0px), calc(var(--ix-plan-spread, 0px) * -.5)); }
.ix-cinematic .ix-blueprint-window span { transform: translate(calc(var(--ix-plan-spread, 0px) * -.4), 0); }
.ix-cinematic .ix-finale { background: #090b0f; }
.ix-cinematic .ix-finale-sky { clip-path: circle(var(--ix-finale-radius, 15%) at 50% 52%); transform: scale(var(--ix-finale-scale, 1.3)); }
.ix-cinematic .ix-finale h2 { transform: translateY(var(--ix-finale-title-y, 0px)); }
.ix-cinematic:not(.ix-pinned) .ix-browser { transform: perspective(1000px) rotateY(var(--ix-mobile-turn, -6deg)) translateY(var(--ix-mobile-rise, 0px)); }
.ix-story-progress { position: fixed; bottom: 0; left: 0; width: 100%; height: 2px; z-index: 95; pointer-events: none; background: #91b7ed15; }
.ix-story-progress span { display: block; width: 100%; height: 100%; transform: scaleX(var(--ix-total, 0)); transform-origin: left; background: linear-gradient(90deg, #638fe8, #d1e5ff); }
.ix-after-story .ix-story-progress { display: none; }
.ix-quiet .ix-intro { height: auto; }
.ix-quiet .ix-stage { height: max(700px, var(--ix-vh)); position: relative; top: 0; }
.ix-quiet .ix-portal { transform: none; }
.ix-quiet .ix-shutter { transform: translateY(-85%); }
.ix-quiet .ix-hero-copy, .ix-quiet .ix-hero-caption, .ix-quiet .ix-discover { opacity: 1; transform: none; }
.ix-quiet :is(.ix-world-copy, .ix-open-copy, .ix-sky) { opacity: 0; }
.ix-quiet .ix-portal-position, .ix-quiet .ix-vignette { opacity: 1; }
.ix-quiet .ix-reveal-word { opacity: 1!important; }
@media (min-width: 901px) and (max-height: 850px) {
    .ix-pinned .ix-about-layout { padding-top: 3vh; padding-bottom: 0; }
    .ix-pinned .ix-orb { width: min(32vw, 390px); margin-left: 0; }
    .ix-pinned .ix-work h2 { font-size: 58px!important; }
    .ix-pinned .ix-work-showcase { height: calc(var(--ix-vh) * .5); }
    .ix-pinned .ix-work-bottom { bottom: 25px; }
}
@media (max-width: 900px) {
    .ix-page .ix-orb { width: 330px; max-width: 100%; margin: 0 auto; }
    .ix-cinematic .ix-intro { height: calc(var(--ix-vh) * 2.6); }
    .ix-motion-type { top: 18%; font-size: 115px; }
    .ix-motion-toggle { display: block; bottom: 16px; }
    .ix-orb .ix-orbit-label { font-size: 6px; }
    .ix-browser { transition: transform .5s; }
    .ix-browser.ix-card-active { display: block; }
    .ix-work-showcase { min-height: 250px; }
    .ix-cinematic .ix-finale h2 { transform: translateY(calc(var(--ix-finale-title-y, 0px) * .4)); }
}
@media (max-width: 600px) {
    .ix-cinematic .ix-portal::before { padding: 15px; }
    .ix-cinematic .ix-portal-rim::before { padding: 8px; }
    .ix-page .ix-orb { width: 310px; }
    .ix-cinematic .ix-portal-position { top: 44%; }
    .ix-orb.ix-has-particles i { font-size: 74px; }
    .ix-about-layout { padding-top: 10px; }
    .ix-motion-type { top: 22%; }
}
@media (prefers-reduced-motion: reduce) {
    .ix-motion-type, .ix-story-progress { display: none; }
    .ix-page .ix-reveal-word { opacity: 1; }
}

/* An exploded interface: scroll separates the planes, pointer changes perspective. */
.ix-craft { isolation: isolate; overflow: hidden; }
.ix-craft::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at var(--ix-craft-light-x,50%) var(--ix-craft-light-y,50%), #a6c8ff48, transparent 62%); }
.ix-page .ix-craft-scene { display: block; width: min(100%, 440px); height: 310px; margin: 22px auto 0; perspective: 1000px; mask-image: none; background: none; filter: hue-rotate(var(--ix-craft-hue,0deg)); transition: filter .6s; }
.ix-craft-stack { position: absolute; width: 190px; height: 205px; left: calc(50% - 95px); top: 45px; transform-style: preserve-3d; transform: rotateX(36deg) rotateY(-14deg) rotateZ(-22deg); }
.ix-cinematic .ix-craft-stack { transform: rotateX(var(--ix-craft-tilt,36deg)) rotateY(var(--ix-craft-turn,-14deg)) rotateZ(calc(-22deg + var(--ix-craft-focus,0deg))); }
.ix-craft-sheet { position: absolute; inset: 0; border: 1px solid #789bc4; border-radius: 14px; padding: 14px; backface-visibility: visible; }
.ix-craft-sheet small { display: block; font-size: 7px; letter-spacing: .17em; color: #425d7d; }
.ix-craft-grid { background: repeating-linear-gradient(0deg, transparent 0 19px, #7096be2b 19px 20px), repeating-linear-gradient(90deg, #dae5ee99 0 19px, #7096be2b 19px 20px); box-shadow: 15px 30px 40px #25466a1c; transform: translateZ(-45px); }
.ix-craft-guides { position: absolute; inset: 40px 22px 22px; border: 1px dashed #688bac; border-radius: 50%; }
.ix-craft-glass { background: linear-gradient(135deg,#e6f3ffbb,#86b2db33 50%,#c4d8f080); transform: translateZ(0); box-shadow: inset 0 0 25px #ffffff90; }
.ix-craft-lens { width: 100px; height: 100px; margin: 24px auto; border: 1px solid #6388b1; border-radius: 50%; background: radial-gradient(circle at 30% 25%,#ffffffdd,#79a9d533 50%,#4572a680); box-shadow: inset -8px -8px 20px #5e8cb13b, 0 0 0 10px #b9d6ed33, 0 0 0 11px #83a8c34d; }
.ix-craft-surface { background: linear-gradient(135deg,#ffffffde,#d5e8fb99 55%,#b3cff1cc); box-shadow: inset 0 1px #fff, 0 15px 35px #53739422; transform: translateZ(45px); overflow: hidden; }
.ix-craft-surface b { display: block; font-family: Georgia,serif; font-size: 83px; line-height: 1.3; font-weight: 400; letter-spacing: -.09em; color: #29476a; text-align: center; }
.ix-craft-surface > span { display: block; text-align: center; font-size: 6px; letter-spacing: .25em; color: #425d7d; }
.ix-craft-surface > i { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #fff; box-shadow: 0 0 16px 4px #ffffffb3; transform: rotate(-25deg) scaleX(1.4); }
.ix-cinematic .ix-craft-grid { transform: translateZ(calc(var(--ix-craft-spread,45px) * -1)); }
.ix-cinematic .ix-craft-surface { transform: translateZ(var(--ix-craft-spread,45px)); }
.ix-cinematic .ix-craft-surface > i { top: var(--ix-craft-scan,50%); }
.ix-craft-orbit { position: absolute; width: 88%; height: 66%; left: 6%; top: 16%; border: 1px solid #6989ad44; border-radius: 50%; transform: rotate(-28deg); }
.ix-craft-orbit::after { content: ''; position: absolute; top: 22%; left: 9%; width: 6px; height: 6px; border-radius: 50%; background: #668fbb; box-shadow: 0 0 15px #427ccc80; }
.ix-cinematic .ix-craft-orbit { transform: rotate(calc(-28deg + var(--ix-craft-orbit,0deg))); }
.ix-craft-orbit-two { width: 72%; left: 14%; border-style: dashed; opacity: .55; transform: rotate(38deg); }
.ix-cinematic .ix-craft-orbit-two { transform: rotate(calc(38deg - var(--ix-craft-orbit,0deg))); }
.ix-craft-coordinate, .ix-craft-readout { position: absolute; bottom: 10px; font-size: 7px; letter-spacing: .13em; color: #506985; }
.ix-craft-coordinate { left: 0; }.ix-craft-readout { right: 0; }
.ix-craft-meter { position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: #6d8bac33; }
.ix-craft-meter i { display: block; height: 100%; background: #4e739e; transform-origin: left; transform: scaleX(.5); }
.ix-cinematic .ix-craft-meter i { transform: scaleX(var(--ix-craft-progress,.5)); }
.ix-craft .ix-details details { transition: padding .35s, background .35s, box-shadow .35s; }
.ix-craft .ix-details details[open] { padding-inline: 18px; background: #ffffff45; box-shadow: inset 2px 0 #6d8fb8; }
.ix-craft .ix-details summary:hover { color: #416b9d; }
@media (max-width: 900px) { .ix-page .ix-craft-scene { height: 290px; } }
@media (max-width: 600px) {
    .ix-page .ix-craft-scene { width: 100%; max-width: 360px; height: 300px; margin-top: 24px; }
    .ix-craft-layout { gap: 20px; }
    .ix-craft .ix-details details[open] { padding-inline: 12px; }
}
.ix-quiet .ix-craft::before { background: radial-gradient(ellipse,#a6c8ff30,transparent 62%); }
.ix-quiet .ix-craft-scene, .ix-quiet .ix-craft .ix-details details { transition: none; }

/* Keep the entire craft scene in place for four scroll-driven reading beats. */
.ix-craft-pinned .ix-track-craft { height: calc(var(--ix-vh) * 4.6); background: #e9e7e1; }
.ix-craft-pinned .ix-track-craft > .ix-craft { position: sticky; top: var(--ix-header); height: var(--ix-vh); min-height: 0; padding-bottom: 30px; overflow: hidden; }
.ix-craft-pinned .ix-craft-layout { padding-top: clamp(24px, 6vh, 65px); }
.ix-craft-pinned .ix-details { overflow-anchor: none; }
@media (min-width: 901px) and (max-height: 850px) {
    .ix-craft-pinned .ix-craft { padding-top: 25px; }
    .ix-craft-pinned .ix-craft-layout { padding-top: 25px; }
    .ix-craft-pinned #ix-main .ix-craft h2 { font-size: 48px; }
    .ix-craft-pinned .ix-craft-scene { height: 270px; margin-top: 8px; }
    .ix-craft-pinned .ix-details details { padding-block: 17px; }
}
@media (max-width: 900px) {
    .ix-craft-pinned .ix-craft { padding-top: 22px; }
    .ix-craft-pinned .ix-craft-layout { grid-template-columns: 1fr; gap: 14px; padding-top: 18px; }
    .ix-craft-pinned .ix-craft-layout > div:first-child { position: relative; min-height: 160px; padding-right: 42%; }
    .ix-craft-pinned #ix-main .ix-craft h2 { font-size: clamp(27px,4.6vw,40px); }
    .ix-craft-pinned #ix-main .ix-craft .ix-body { font-size: 12px; margin-top: 12px; }
    .ix-craft-pinned .ix-craft-scene { position: absolute; right: 8px; top: -8px; width: 210px; height: 240px; margin: 0; transform: scale(.5); transform-origin: top right; }
    .ix-craft-pinned .ix-craft-coordinate { display: none; }
    .ix-craft-pinned .ix-details details { padding-block: 15px; }
    .ix-craft-pinned .ix-details summary { font-size: 15px; }
    .ix-craft-pinned .ix-details details > div { padding-top: 12px; }
    .ix-craft-pinned #ix-main .ix-details p { font-size: 13px; line-height: 1.8; }
    .ix-craft-pinned .ix-details details > div > span { margin-top: 10px; font-size: 7px; }
}
/* Short viewports and reduced motion retain a naturally flowing accordion. */
.ix-pinned:not(.ix-craft-pinned) .ix-track-craft > .ix-craft { position: relative; top: 0; height: auto; overflow: visible; }