/* ==========================================================================
   ROOT VARIABLES & THEMING
   ========================================================================== */:root {
    --font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
    --color-black:#000000;
    --color-gray-dark:#323232;
    --color-gray-med:#777777;
    --color-gray-light:#B2B2B2;
    --color-gray-xlight:#D9D9D9;
    --color-bg:#FFFFFF;
    --color-player-bg:#101218;
    --page-padding:8vw;
    /* Very light card background color for default (Light) mode */
    --color-card-bg:#F2F2F7;
    --color-card-border:rgba(0,0,0,0.05);
    /* SPEED CONTROL PANEL */
    --speed-fast:0.2s;
    /* For hovers,clicks,and buttons */
    --speed-main:1s;
    /* For screen transitions,backgrounds,and slides */
    
    /* DEVICE CONTROL PANEL */
    --device-aspect-ratio:1 / 2.03;
    /* Default iPhone ratio */
    
    /* Heights for each screen (Adjust here to increase/decrease) */
    --device-h-gallery:60vh;
    /* Home */
    --device-h-case:75vh;
    /* Case Details */
    --device-h-player:85vh;
    /* Video Player */

    /* Maximum limits (so very large screens don't become giant) */
    --device-max-h-gallery:600px;
    --device-max-h-case:700px;
    --device-max-h-player:800px;
    --device-w-ratio:-0.4926;
}
/* ==========================================================================
   DEVICE VARIATIONS
   ========================================================================== */

/* iPhone 17 (Super Pro Max) */
.iphone-17 {
    --device-aspect-ratio:1 / 2.15;
    --device-h-gallery:55vh;
    /* FINE TUNING:Decreased width and height to fit inside the border */
    --screen-w:91%;
    --screen-h:92%;
    --screen-r:10%;
    --device-offset-y:12px;
    --device-w-ratio:-0.4651;
}
/* Apple Watch - Thin Ratio for Gallery and Case View */
.apple-watch {
    --device-aspect-ratio:1 / 1.6;
    --device-h-gallery:30vh;
    --device-h-case:50vh;
    --screen-w:74%;
    /* Video stays inside the watch 'body' */
    --screen-h:46%;
    --screen-r:18%;
    --device-offset-y:30px;
    --device-w-ratio:-0.625;
}
/* Apple Watch - Square only in Player */
.player-wrapper.apple-watch {
    --device-aspect-ratio:1 / 1.6;
    --device-h-player:70vh;
    --screen-w:88%;
    --screen-h:88%;
    --screen-r:22%;
}
/* iPhone 12 */
.iphone-12 {
    --device-aspect-ratio:1 / 2.1;
    --device-h-gallery:48vh;
    --screen-w:105%;
    --screen-h:100%;
    --screen-r:9%;
    --device-offset-y:15px;
    /* Negative value lowers the device */
    --device-w-ratio:-0.4761;
}
/* iPhone X */
.iphone-x {
    --device-aspect-ratio:1 / 2.1;
    --device-h-gallery:55vh;
    --screen-w:87%;
    --screen-h:92%;
    --screen-r:9%;
    --device-offset-y:8px;
    --device-w-ratio:-0.4761;
}
/* iPhone 8 */
.iphone-8 {
    --device-aspect-ratio:1 / 1.8;
    --device-h-gallery:49vh;
    --device-h-case:70vh;
    --screen-w:83%;
    --screen-h:72%;
    --screen-r:1%;
    --device-offset-y:23px;
    --device-w-ratio:-0.5555;
}
/* ==========================================================================
   RESET & GLOBAL TYPOGRAPHY
   ========================================================================== */

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body {
    font-family:var(--font-family);
    background-color:var(--color-bg);
    color:var(--color-black);
    overflow:hidden;
    height:100vh;
    width:100vw;
    transition:background-color 0.4s ease;
    /* ANTI-COPY LOCKS */
    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
}
body.player-active {
    background-color:var(--color-player-bg);
}
html,body {
    /* Disables double-tap zoom,but keeps pinch-to-zoom and scroll */
    touch-action:manipulation;
}
/* Apply to specific interactive elements if needed */
button,a,.nav-link,.case-thumb-wrapper {
    touch-action:manipulation;
}
/* Typography */
h1 {
    font-weight:500;
    font-size:38px;
    letter-spacing:-0.04em;
    line-height:0.8;
    color:var(--color-black);
}
h2 {
    font-weight:600;
    font-size:38px;
    letter-spacing:-0.02em;
    line-height:1.0;
    color:var(--color-black);
}
h3 {
    font-weight:600;
    font-size:20px;
    letter-spacing:-0.02em;
    line-height:1.0;
    color:var(--color-black);
}
h4 {
    font-weight:250;
    font-size:22px;
    letter-spacing:-0.04em;
    line-height:0.8;
    color:var(--color-gray-med);
}
.p1 {
    font-weight:400;
    font-size:18px;
    letter-spacing:-0.02em;
    line-height:1.1;
    color:var(--color-black);
}
.p2 {
    font-weight:300;
    font-size:17px;
    letter-spacing:-0.02em;
    line-height:0.8;
    color:var(--color-gray-med);
}
.p3 {
    font-weight:500;
    font-size:13px;
    letter-spacing:0em;
    line-height:1.0;
    color:var(--color-gray-xlight);
    text-decoration:none;
}
/* ==========================================================================
   LAYOUT BASE & NAVIGATION
   ========================================================================== */

#app-container {
    width:100vw;
    padding:15vh 0 60px;
    height:100vh;
    display:flex;
    flex-direction:column;
    position:relative;
}
header {
    width:100%;
    max-width:1440px;
    margin:0 auto 50px auto;
    padding:0 var(--page-padding);
    display:flex;
    justify-content:space-between;
    align-items:center;
    z-index:10;
    transition:opacity 0.1s ease;
    view-transition-name:main-header-view;
}
.header-left h1 {
    margin-bottom:12px;
}
.header-right {
    display:flex;
    flex-direction:column;
    gap:12px;
    text-align:left;
}
header.hidden-header {
    opacity:0;
    pointer-events:none;
    visibility:hidden;
    /* Removes from TAB flow */
}
.nav-link {
    cursor:pointer;
    transition:color 0.2s ease;
    text-decoration:none;
}
.nav-link:hover {
    color:var(--color-black);
}
/* FLOATING BUTTONS */
.floating-back-btn {
    position:fixed;
    top:50px;
    left:max(4vw,calc((100vw - 1440px) / 2 + 4vw));
    width:44px;
    height:44px;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    cursor:pointer;
    z-index:1000;
    transition:opacity 0.3s ease,transform 0.2s ease;
    view-transition-name:back-btn-view;
}
.floating-back-btn:active {
    transform:scale(0.9);
}
.floating-back-btn.hidden {
    opacity:0;
    pointer-events:none;
}
body.player-active .floating-back-btn svg path {
    fill:white;
}
/* Ensures the back icon follows theme color variables */
.floating-back-btn svg path {
    fill:var(--color-black);
    transition:fill 0.3s ease;
}
.floating-a11y-btn {
    position:fixed;
    top:30px;
    right:40px;
    width:25px;
    height:25px;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    background:none;
    border:none;
    cursor:pointer;
    z-index:1000;
    color:#2B71F0;
    transition:color 0.3s ease,transform 0.2s ease;
    view-transition-name:a11y-btn-view;
}
.floating-a11y-btn:active {
    transform:scale(0.9);
}
body.player-active .floating-a11y-btn,html.a11y-dark-mode .floating-a11y-btn {
    color:#FFFFFF;
}
/* Fixed Footer */
footer {
    position:fixed;
    bottom:20px;
    left:0;
    width:100%;
    text-align:center;
    pointer-events:none;
    transition:opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
    view-transition-name:footer-view;
}
footer.hidden-footer {
    opacity:0;
    pointer-events:none;
    visibility:hidden; /* Removes it completely from screen reader and keyboard tab focus streams */
}
footer p {
    font-size:12px;
    color:var(--color-gray-light);
    letter-spacing:0;
    padding:0 var(--page-padding);
}
/* ==========================================================================
   VIEWS - GENERAL
   ========================================================================== */

.view-section {
    flex-grow:1;
    display:none;
    height:100%;
    position:relative;
}
.view-section.active {
    display:block;
}
/* ==========================================================================
   HOME GALLERY VIEW
   ========================================================================== */

#view-home.active {
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.gallery-container {
    position:relative;
    z-index:2;
    display:flex;
    gap:140px;
    overflow-x:auto;
    overflow-y:hidden;
    align-items:flex-end;
    height:75vh;
    padding-bottom:105px;
    width:100vw;
    cursor:grab;
    scrollbar-width:none;
    will-change:transform,opacity;
    /* Smooth baseline hardware acceleration */
    opacity:0;
    animation:fluidSlideInRight 1.2s cubic-bezier(0.16,1,0.3,1) 0.2s both;
    /* THE SPRING:Cushions the rubber-band bounce back when click is released */
    transition:transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
/* Tracks mouse 1:1 with zero delay or spring lag while dragging */
.gallery-container.dragging {
    transition:none !important;
}
/* PREMIUM ENTRANCE ANIMATION TRACK */
@keyframes fluidSlideInRight {
    from {
    opacity:0;
    transform:translateX(60px);
}
to {
    opacity:1;
    transform:translateX(0);
}
}.gallery-item {
    will-change:transform,opacity;
    animation:fluidSlideInRight 1.4s cubic-bezier(0.16,1,0.3,1) both;
}
/* THE SUPPRESSION BLOCK:Neutralizes ONLY landing animations on re-entry */
html.bypassed-entrance .gallery-container,html.bypassed-entrance .gallery-item {
    animation:none !important;
    opacity:1 !important;
}
/* Premium micro-delays for the landing stagger effect */
.gallery-item:nth-child(1) {
    animation-delay:0.25s;
}
.gallery-item:nth-child(2) {
    animation-delay:0.32s;
}
.gallery-item:nth-child(3) {
    animation-delay:0.39s;
}
.gallery-item:nth-child(4) {
    animation-delay:0.46s;
}
/* Visual breathing room on home */
.gallery-container::after {
    content:"";
    display:block;
    width:max(4vw,calc((100vw - 1440px) / 2 + 2vw));
    flex-shrink:0;
    height:1px;
}
.case-thumb-wrapper:last-child {
    margin-right:0 !important;
}
.gallery-item:first-child {
    margin-left:max(var(--page-padding),calc((100vw - 1440px) / 2 + var(--page-padding)));
}
/* DEVICE COMPONENT (VIDEO + FRAME) */
.case-thumb-wrapper {
    flex:0 0 auto;
    height:var(--device-h-gallery);
    max-height:var(--device-max-h-gallery);
    aspect-ratio:var(--device-aspect-ratio);
    position:relative;
    transition:transform 0.2s ease;
    cursor:pointer;
    display:block;
    margin-bottom:var(--device-offset-y,0px);
}
.case-thumb-wrapper:active {
    transform:scale(0.98);
}
.case-thumb-wrapper:first-child {
    margin-left:0;
}
/* 1. THE SHELL (PNG Frame) */
.phone-frame-overlay {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    object-fit:contain;
    object-position:center;
    /* Ensures the mockup stays perfectly centered */
    pointer-events:none;
    user-select:none;
    -webkit-user-drag:none;
    z-index:2;
    /* Always on top */
}
/* 2. THE VIDEO (The Screen) */
.case-thumb-video {
    position:absolute;
    z-index:1;
    /* Behind the shell */
    
    /* Center perfectly in the geometric middle of the box */
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) !important;
    /* Pulls variables to match the exact size of the transparent "hole" */
    width:var(--screen-w,90%);
    height:var(--screen-h,95%);
    border-radius:var(--screen-r,10%);
    object-fit:cover;
    /* Fills the glass area without squishing the video */
    pointer-events:none;
}
/* STATIC THUMBNAIL CLASS */
.case-thumb-img {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    object-fit:contain;
    object-position:center;
    /* Ensures perfect alignment with the frame */
    z-index:1;
    /* Stays right behind the phone-frame-overlay (z-index:2) */
    pointer-events:none;
}
/* GALLERY ITEM METADATA */
.gallery-item-meta {
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    user-select:none;
    padding:0 00px;
    box-sizing:border-box;
}
.gallery-item-header {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    width:100%;
    gap:10px;
}
.gallery-item-header.no-logo .gallery-item-text {
    align-items:center;
    text-align:center;
    padding:0;
    margin:0;
}
.gallery-item-logo {
    width:38px;
    height:38px;
    border-radius:8px;
    object-fit:cover;
    flex-shrink:0;
    border:1px solid var(--color-card-border);
}
.gallery-item-text {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    width:100%;
}
.gallery-item-year {
    font-size:clamp(9px,0.5vw + 0.5vh,11px);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--color-gray-med);
    text-align:center;
}
.gallery-item-title {
    font-size:clamp(13px,0.7vw + 0.6vh,15px);
    font-weight:500;
    line-height:1.3;
    color:var(--color-black);
    letter-spacing:-0.01em;
    text-align:center;
}
.gallery-item-pills {
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    justify-content:center;
}
.gallery-pill {
    font-size:clamp(8.5px,0.4vw + 0.5vh,10px);
    padding:clamp(2px,0.4vh,3px) clamp(6px,0.8vw,10px);
    font-weight:600;
    background-color:var(--color-card-bg);
    border:1px solid var(--color-card-border);
    color:var(--color-gray-dark);
    border-radius:100px;
    text-transform:uppercase;
    letter-spacing:0.04em;
}
/* ==========================================================================
   CASE DETAIL VIEW
   ========================================================================== */

#view-case.active {
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background-color:var(--color-bg);
    z-index:20;
}
/* Editorial Layout for Case View */
#view-case .case-layout {
    max-width:1300px;
    /* Widened as requested */
    gap:80px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 var(--page-padding);
    height:100%;
    width:100%;
    margin:0 auto;
}
/* DYNAMIC CASE EFFECT (SIDE SLIDE WITHOUT SHRINKING) */
.case-layout {
    transition:gap 0.8s cubic-bezier(0.16,1,0.3,1);
}
.case-info-container {
    transition:max-width 0.8s cubic-bezier(0.16,1,0.3,1);
    margin:0 auto;
    /* Ensures safe central alignment */
    flex:1;
    max-width:700px;
    height:92vh;
    position:relative;
}
.case-media {
    height:var(--device-h-case);
    max-height:var(--device-max-h-case);
    aspect-ratio:var(--device-aspect-ratio);
    position:relative;
    /* Animate margin instead of height/width to keep physical scale intact */
    transition:margin 0.8s cubic-bezier(0.16,1,0.3,1),opacity 0.6s ease,transform 0.8s cubic-bezier(0.16,1,0.3,1);
    opacity:1;
    transform:translateX(0);
    margin-left:0;
    flex-shrink:0;
}
/* WHEN SCROLL OCCURS */
.case-layout.is-scrolled {
    gap:0px;
    /* Space between the two zeros out smoothly */
}
.case-layout.is-scrolled .case-media {
    /* Uses the EXACT inverted width of the active device */
    margin-left:calc(var(--device-h-case) * var(--device-w-ratio)) !important;
    transform:translateX(-15vw);
    opacity:0;
    pointer-events:none;
}
.case-layout.is-scrolled .case-info-container {
    max-width:800px;
    /* DEFINES HOW MUCH IT STRETCHES */
}
.case-year-label {
    font-weight:600;
    font-size:13px;
    color:var(--color-gray-med);
    margin-bottom:8px;
    display:block;
    text-transform:uppercase;
    letter-spacing:0.06em;
    /* Gives that chic Swiss/Apple typography look */
}
/* Top and Bottom Gradient Curtain Effect */
.case-info-container::before,.case-info-container::after {
    content:'';
    position:absolute;
    left:0;
    right:0;
    height:100px;
    z-index:10;
    pointer-events:none;
}
.case-info-container::before {
    top:-5px;
    background:linear-gradient(to bottom,var(--color-bg) 20%,transparent 100%);
}
.case-info-container::after {
    bottom:-5px;
    background:linear-gradient(to top,var(--color-bg) 20%,transparent 100%);
}
.case-info-scroll {
    height:100%;
    overflow-y:auto;
    padding:80px 0;
    scrollbar-width:none;
    overscroll-behavior:contain;
    /* Prevents text scroll from scrolling the slider */
    pointer-events:auto;
    /* Ensures mouse interacts with text */
}
.case-info-scroll::-webkit-scrollbar {
    display:none;
}
.case-header-row {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    /* Aligns button with title baseline */
    gap:32px;
    margin-bottom:24px;
}
.case-title-block {
    display:flex;
    flex-direction:column;
}
.case-info {
    display:flex;
    flex-direction:column;
    gap:32px;
    max-width:250px;
}
.info-block {
    display:flex;
    flex-direction:column;
    gap:8px;
}
#case-credits {
    display:flex;
    flex-direction:column;
    gap:16px;
}
/* COMPACT & UNIFIED ACTION BUTTONS */
.case-actions-group {
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:20px !important;
    margin-bottom:4px;
    flex-wrap:wrap;
    width:100%;
}
.btn-play-pill,.btn-secondary-pill {
    height:36px;
    /* Enforces absolute pixel-perfect vertical alignment */
    display:inline-flex;
    align-items:center;
    border-radius:100px;
    font-weight:600;
    font-size:13.5px;
    letter-spacing:-0.01em;
    cursor:pointer;
    text-decoration:none;
    box-sizing:border-box;
    transition:transform 0.2s cubic-bezier(0.16,1,0.3,1),border-color var(--speed-fast) ease,color var(--speed-fast) ease;
}
.btn-play-pill {
    background:var(--color-black);
    color:var(--color-bg);
    border:1px solid var(--color-black);
    padding:0 16px 0 12px;
}

.play-icon-circle {
    display:flex;
    align-items:center;
    justify-content:center;
    background:#FFFFFF;
    width:14px;
    height:14px;
    border-radius:50%;
    margin-right:8px;
    flex-shrink:0;
}
.play-icon-circle svg {
    transform:translateX(0.5px);
    /* Optical subpixel alignment shift */
}
.btn-secondary-pill {
    background:transparent;
    border:1.5px solid var(--color-gray-light);
    color:var(--color-gray-dark);
    padding:0 16px;
    gap:8px;
}
.btn-secondary-pill svg {
    width:14px;
    height:14px;
    flex-shrink:0;
    opacity:0.8;
    transition:opacity var(--speed-fast) ease;
}
/* HOVER ACTIONS */
.btn-play-pill:hover,.btn-secondary-pill:hover {
    transform:scale(1.02);
}
.btn-secondary-pill:hover {
    border-color:var(--color-black);
    color:var(--color-black);
}
.btn-secondary-pill:hover svg {
    opacity:1;
}
/* Credits and Editorial Typography */
.case-credits-horizontal {
    font-size:16px;
    font-weight:600;
    color:var(--color-gray-med);
    margin-top:2px;
    /* Ensures distance from title when NO button is present */
    margin-bottom:8px;
    line-height:1.5;
}
/* Editorial Typography inside case */
.case-description-body h3 {
    font-size:20px;
    font-weight:600;
    color:var(--color-black);
    margin:40px 0 12px 0;
    /* Larger top space to separate paragraphs */
    line-height:1.2;
}
/* Main case text (Desktop) */
.case-description-body .p1 {
    font-size:17px;
    line-height:1.6;
    margin-bottom:24px;
    color:var(--color-black);
    opacity:0.9;
}
/* ABSOLUTE TOP-RIGHT CORNER LOGO OVERRIDES */
.case-thumb-wrapper .gallery-item-logo,.case-media .case-detail-logo {
    position:absolute;
    top:-7%;
    opacity:0%;
    left:50%;
    margin:0 !important;
    z-index:10;
    pointer-events:none;
}
/* CASE EXPANDED DETAIL VIEW LOGO */
.case-detail-logo {
    width:46px;
    height:46px;
    border-radius:10px;
    object-fit:cover;
    margin-bottom:16px;
    border:1px solid var(--color-card-border);
    align-self:flex-start;
}
/* EDITORIAL ASSETS (IMAGES & CODE) IN CASE */
.case-asset-wrapper {
    margin:40px 0;
    display:flex;
    flex-direction:column;
    gap:12px;
}
.case-asset-box {
    background-color:#F2F2F7;
    /* Apple's default super light gray */
    border-radius:16px;
    padding:32px;
    width:100%;
    overflow-x:auto;
    scrollbar-width:none;
}
.case-asset-box::-webkit-scrollbar {
    display:none;
}
.case-asset-box.is-image {
    display:flex;
    justify-content:center;
    align-items:center;
}
.case-asset-box img {
    max-width:100%;
    max-height:55vh;
    object-fit:contain;
    display:block;
}
.case-caption {
    font-size:15px;
    color:var(--color-gray-med);
    line-height:1.4;
    margin:0;
}
/* CODE & COLOR TOKENS (VS CODE STYLE) */
.case-asset-box pre {
    margin:0;
    font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
    font-size:15px;
    line-height:1.6;
    color:#24292e;
    white-space:pre-wrap;
    word-break:break-all;
    overflow-wrap:break-word;
}
.token.keyword {
    color:#d73a49;
    font-weight:600;
}
.token.function {
    color:#6f42c1;
}
.token.parameter {
    color:#e36209;
}
.token.string {
    color:#032f62;
}
.token.property {
    color:#005cc5;
}
.token.comment {
    color:#6a737d;
    font-style:italic;
}
/* CASE SLIDER CONTAINER */
.case-slider-container {
    display:flex;
    width:100vw;
    height:100vh;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
    cursor:grab;
}
.case-slider-container::-webkit-scrollbar {
    display:none;
}
.case-slider-container.dragging {
    scroll-snap-type:none;
    scroll-behavior:auto;
    cursor:grabbing;
}
.case-slide-wrapper {
    flex:0 0 100vw;
    width:100vw;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    scroll-snap-align:center;
    scroll-snap-stop:always;
    position:relative;
}
/* SLIDER DOTS */
.slider-dots-container {
    position:absolute;
    bottom:40px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:12px;
    z-index:30;
}
.slider-dot {
    width:10px;
    height:10px;
    border-radius:50%;
    background-color:var(--color-gray-xlight);
    transition:background-color 0.3s ease,transform 0.2s ease;
    cursor:pointer;
}
.slider-dot.active {
    background-color:var(--color-gray-dark);
    transform:scale(1.2);
}
/* Continuous Animation */
.active-morph-element {
    view-transition-name:case-media-view;
}
/* FLOATING TABLE OF CONTENTS */
.case-toc {
    position:absolute;
    right:3vw;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:12px;
    z-index:50;
    padding:24px 16px;
    border-radius:16px;
    transition:background-color 0.3s ease,box-shadow 0.3s ease;
}
.case-toc:hover {
    background-color:var(--color-bg);
    box-shadow:0 10px 40px rgba(0,0,0,0.06);
}
.toc-item {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    cursor:pointer;
    opacity:0.3;
    transition:opacity 0.2s ease;
}
.toc-item:hover,.toc-item.active {
    opacity:1;
}
.toc-dash {
    width:10px;
    height:2px;
    background-color:var(--color-gray-med);
    transition:width 0.3s ease,background-color 0.3s ease;
    border-radius:2px;
}
.toc-item.active .toc-dash {
    background-color:var(--color-black);
    width:18px;
}
/* Curtain Trick for smooth line breaks */
.toc-text-wrapper {
    direction:rtl;
    /* THE SECRET:Makes the mask open from right to left */
    max-width:0px;
    overflow:hidden;
    transition:max-width 0.3s ease;
}
.case-toc:hover .toc-text-wrapper {
    max-width:250px;
}
.toc-text {
    direction:ltr;
    /* Reverts text to normal */
    font-size:13px;
    font-weight:500;
    color:var(--color-gray-dark);
    line-height:1.3;
    text-align:right;
    white-space:normal;
    width:200px;
    padding-right:12px;
    opacity:0;
    transform:translateX(10px);
    transition:opacity 0.4s ease,transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.case-toc:hover .toc-text {
    opacity:1;
    transform:translateX(0);
}
/* ==========================================================================
   VIDEO PLAYER VIEW & PROGRESS BAR
   ========================================================================== */

#progress-container {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:rgba(255,255,255,0.05);
    z-index:10000;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transition:opacity 0.4s ease,visibility 0.4s ease;
}
body.player-active #progress-container {
    opacity:1;
    visibility:visible;
}
#progress-bar {
    width:0%;
    height:100%;
    background:linear-gradient(90deg,rgba(79,172,254,0.8) 0%,rgba(0,242,254,1) 100%);
    position:relative;
    transition:width 0.1s linear;
    box-shadow:0 0 15px rgba(0,242,254,0.4);
}
#progress-bar::after {
    content:'';
    position:absolute;
    right:0;
    top:0;
    width:100px;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4));
    filter:blur(2px);
}
.player-overlay {
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:100;
}
.player-overlay.hidden {
    display:none;
}
.player-wrapper {
    position:relative;
    height:var(--device-h-player);
    max-height:var(--device-max-h-player);
    aspect-ratio:var(--device-aspect-ratio);
}
/* Player now uses the same geometric intelligence as other videos */
#main-video {
    position:absolute;
    z-index:1;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:var(--screen-w,90%);
    height:var(--screen-h,95%);
    border-radius:var(--screen-r,10%);
    object-fit:cover;
    transition:opacity 0.4s ease;
}
.player-controls {
    position:absolute;
    right:-70px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:20px;
    opacity:1;
    transition:opacity 0.4s ease;
}
.player-controls.fade-out {
    opacity:0;
    pointer-events:none;
}
.icon-btn {
    background:none;
    border:none;
    cursor:pointer;
    width:33px;
    height:33px;
}
.icon-btn span.hidden {
    display:none;
}
#btn-cc {
    transition:transform 0.2s ease;
}
/* LOADING INDICATOR */
.video-loader {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:5;
    width:50px;
    height:50px;
    background-color:white;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:black;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    pointer-events:none;
    transition:opacity 0.3s ease;
}
.video-loader.hidden {
    opacity:0;
    display:none;
}
.spinner {
    width:25px;
    height:25px;
    animation:rotate 1s linear infinite;
}
.spinner circle {
    stroke-dasharray:90,150;
    stroke-dashoffset:0;
}
@keyframes rotate {
    100% {
    transform:rotate(360deg);
}
}/* Subtitles */
video::cue {
    visibility:hidden;
}
.custom-subtitle {
    position:absolute;
    bottom:110px;
    left:50%;
    transform:translateX(-50%);
    z-index:110;
    pointer-events:none;
    display:none;
    text-align:center;
    max-width:85vw;
    width:fit-content;
    background-color:var(--color-gray-dark);
    color:var(--color-bg);
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;
    font-size:18px;
    letter-spacing:-0.02em;
    line-height:1.0;
    padding:4px 6px;
    border-radius:2px;
}
/* ==========================================================================
   ABOUT VIEW
   ========================================================================== */

#view-about.active {
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background-color:var(--color-bg);
    z-index:20;
}
.about-layout {
    display:flex;
    gap:100px;
    align-items:center;
    justify-content:center;
    padding:0 var(--page-padding);
    height:100%;
    max-width:1280px;
    margin:0 auto;
}
#view-about .about-content {
    max-width:450px;
}
#view-about .p1 {
    margin-bottom:24px;
}
.about-links {
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:24px;
}
.about-image-container {
    flex:0 0 auto;
    width:402px;
    height:279px;
    overflow:hidden;
}
#about-photo {
    height:100%;
    width:100%;
    object-fit:cover;
}
/* ==========================================================================
   COMPONENTS (Lightbox,AI Chat,Impact Dashboard)
   ========================================================================== */

/* --- ZOOM EFFECT (LIGHTBOX) --- */
.case-asset-box.is-image {
    position:relative;
    cursor:zoom-in;
    overflow:hidden;
}
.case-asset-box.is-image img {
    transition:transform 0.4s cubic-bezier(0.16,1,0.3,1),filter 0.4s ease;
}
.case-asset-box.is-image:hover img {
    transform:scale(1.03);
    filter:brightness(0.7);
}
.case-asset-box.is-image::after {
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(0.8);
    width:48px;
    height:48px;
    opacity:0;
    transition:opacity 0.3s ease,transform 0.4s cubic-bezier(0.16,1,0.3,1);
    pointer-events:none;
    z-index:10;
    /* Zoom-in icon */
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3Cline x1='11' y1='8' x2='11' y2='14'%3E%3C/line%3E%3Cline x1='8' y1='11' x2='14' y2='11'%3E%3C/line%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
}
.case-asset-box.is-image:hover::after {
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
}
/* FULLSCREEN LIGHTBOX */
.lightbox-overlay {
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background:rgba(0,0,0,0.9);
    backdrop-filter:blur(10px);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:9999999;
    opacity:0;
    visibility:hidden;
    transition:opacity 0.3s ease,visibility 0.3s ease;
    cursor:zoom-out;
}
.lightbox-overlay.active {
    opacity:1;
    visibility:visible;
}
.lightbox-img {
    max-width:95vw;
    max-height:95vh;
    object-fit:contain;
    transform:scale(0.95);
    transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);
    border-radius:8px;
    box-shadow:0 20px 50px rgba(0,0,0,0.5);
}
.lightbox-overlay.active .lightbox-img {
    transform:scale(1);
}
/* --- IMPACT DASHBOARD --- */
.impact-dashboard {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin:24px 0 32px 0;
}
.metric-card {
    background-color:var(--color-card-bg);
    border:1px solid var(--color-card-border);
    padding:16px;
    border-radius:12px;
    display:flex;
    flex-direction:column;
    gap:4px;
    transition:background-color var(--speed-fast),border var(--speed-fast),transform var(--speed-fast);
}
.metric-card:hover {
    transform:translateY(-2px);
    background-color:#EBEBEF;
}
.metric-value {
    font-size:20px;
    font-weight:700;
    color:var(--color-black);
}
.metric-label {
    font-size:13px;
    color:var(--color-gray-med);
    line-height:1.2;
    font-weight:500;
}
/* --- FLOATING AI CHAT WIDGET --- */
.floating-ai-btn {
    position:fixed;
    bottom:30px;
    right:30px;
    width:48px;
    height:48px;
    background:var(--color-black);
    color:var(--color-bg);
    border:none;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:9999999;
    box-shadow:0 4px 16px rgba(0,0,0,0.15);
    transition:transform 0.2s ease,background-color 0.2s ease;
    animation:aiBtnSlideIn 0.8s cubic-bezier(0.16,1,0.3,1) 2s both;
    view-transition-name:floating-ai-btn;
}
.floating-ai-btn:hover {
    transform:scale(1.05);
}
.ai-chat-container {
    position:fixed;
    bottom:94px;
    right:30px;
    width:450px;
    height:600px;
    background:var(--color-bg);
    border:1px solid var(--color-card-border);
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,0.1);
    display:flex;
    flex-direction:column;
    z-index:2000;
    overflow:hidden;
    transition:opacity 0.2s ease,transform 0.2s ease;
}
.ai-chat-container.hidden {
    opacity:0;
    pointer-events:none;
    transform:translateY(10px);
}
@keyframes aiBtnSlideIn {
    from {
    transform:translateX(100px);
    opacity:0;
}
to {
    transform:translateX(0);
    opacity:1;
}
}.ai-greeting-popup {
    position:fixed;
    bottom:36px;
    right:92px;
    background:var(--color-black);
    color:var(--color-bg);
    padding:8px 14px;
    border-radius:10px;
    font-size:13px;
    font-weight:600;
    letter-spacing:-0.01em;
    white-space:nowrap;
    z-index:2000;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    cursor:pointer;
    transition:opacity 0.4s ease,transform 0.4s cubic-bezier(0.16,1,0.3,1);
    animation:popupEntrance 5.2s cubic-bezier(0.16,1,0.3,1) 2.9s forwards;
}
.ai-greeting-popup::after {
    content:'';
    position:absolute;
    right:-5px;
    top:50%;
    transform:translateY(-50%);
    border-width:5px 0 5px 5px;
    border-style:solid;
    border-color:transparent transparent transparent var(--color-black);
}
@keyframes popupEntrance {
    0% {
    opacity:0;
    transform:translateX(10px);
}
/* Start hidden */
    12% {
    opacity:1;
    transform:translateX(0);
}
/* Fully visible */
    88% {
    opacity:1;
    transform:translateX(0);
}
/* Hold state */
    100% {
    opacity:0;
    transform:translateX(10px);
}
/* Vanish */}.ai-greeting-popup:hover {
    transform:scale(1.02) translateX(-2px);
}
/* Chat Header */
.ai-chat-header {
    background:var(--color-bg);
    padding:14px 16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid var(--color-card-border);
}
.ai-chat-status {
    display:flex;
    align-items:center;
    gap:8px;
}
.ai-chat-status h3 {
    font-size:14px;
    font-weight:600;
}
.status-dot {
    width:7px;
    height:7px;
    background:#34C759;
    border-radius:50%;
}
#btn-close-ai {
    background:none;
    border:none;
    cursor:pointer;
    color:var(--color-gray-med);
}
/* Chat Body */
.ai-chat-body {
    flex:1;
    padding:16px;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:12px;
    scrollbar-width:none;
}
.ai-chat-body::-webkit-scrollbar {
    display:none;
}
.msg {
    max-width:80%;
    padding:10px 14px;
    border-radius:14px;
    font-size:16x;
    line-height:1.4;
    word-wrap:break-word;
}
.bot-msg {
    background:var(--color-card-bg);
    color:var(--color-black);
    align-self:flex-start;
    border-top-left-radius:2px;
    border-width:1px;
    border-color:var(--color-card-border);
    border-style:solid;
}

.user-msg {
    background:var(--color-black);
    color:var(--color-bg);
    align-self:flex-end;
    border-top-right-radius:2px;
}
.ai-loading {
    animation:jumpingDots 1.4s infinite;
}
@keyframes jumpingDots {
    0%, 100% { content:''; opacity:0.6; }
    33% { content:'.'; }
    66% { content:'..'; opacity:0.8; transform:translateY(-2px); }
}
/* Chat Footer & Inputs */
.ai-chat-footer {
    padding:12px;
    display:flex;
    gap:8px;
    border-top:1px solid var(--color-card-border);
}
#ai-chat-input {
    flex:1;
    height:36px;
    border:1px solid var(--color-gray-xlight);
    border-radius:100px;
    padding:0 14px;
    font-size:16px;
    background:transparent;
    color:var(--color-black);
    outline:none;
}
#btn-send-ai {
    background:var(--color-black);
    color:var(--color-bg);
    border:none;
    width:36px;
    height:36px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
#btn-send-ai:disabled {
    opacity:0.35;
    cursor:not-allowed;
    pointer-events:none;
    transition:opacity 0.2s ease;
}
/* Disclaimer & Suggestions */
.ai-chat-disclaimer {
    font-size:11px;
    color:var(--color-gray-med);
    text-align:center;
    padding:8px 16px;
    line-height:1.4;
    letter-spacing:-0.01em;
    background:rgba(0,0,0,0.015);
    border-top:1px solid var(--color-card-border);
    flex-shrink:0;
    user-select:none;
    -webkit-user-select:none;
}
.ai-chat-suggestions {
    display:flex;
    gap:8px;
    padding:8px 16px;
    overflow-x:auto;
    scrollbar-width:none;
    flex-shrink:0;
    background:transparent;
    user-select:none;
    -webkit-user-select:none;
}
.ai-chat-suggestions::-webkit-scrollbar {
    display:none;
}
.suggestion-chip {
    background-color:var(--color-card-bg);
    border:1px solid var(--color-card-border);
    color:var(--color-gray-dark);
    padding:6px 14px;
    border-radius:100px;
    font-size:13px;
    font-weight:500;
    letter-spacing:-0.01em;
    white-space:nowrap;
    cursor:pointer;
    transition:background-color var(--speed-fast) ease,border-color var(--speed-fast) ease,transform var(--speed-fast) ease;
}
.suggestion-chip:hover {
    background-color:var(--color-gray-xlight);
    border-color:var(--color-gray-light);
    transform:scale(1.02);
}
/* AGGRESSIVE PORFOLIO SURFACE LOCK WHEN CHAT IS OPENED */
body.chat-open #app-container,body.chat-open .case-slide-wrapper,body.chat-open .gallery-container {
    overflow:hidden !important;
    touch-action:none !important;
}
/* On Desktop (above 768px),keep chat button visible but dimmed when open */
@media (min-width:769px) {
    body:has(.ai-chat-container:not(.hidden)) .floating-ai-btn {
    opacity:0.6 !important;
    transform:scale(0.95) !important;
    cursor:default !important;
}
}/* ==========================================================================
   GEMINI PREMIUM ANIMATION SYSTEM
   ========================================================================== */

/* LAYER 1:The permanent,premium ambient resting gradient. */
#view-home::before {
    content:'';
    position:absolute;
    bottom:-220px;
    right:-220px;
    width:min(90vw,760px);
    height:min(90vw,760px);
    border-radius:50%;
    pointer-events:none;
    z-index:1;
    opacity:0;
    /* Ultra-subtle light mode watercolor profile */
    background:radial-gradient(circle,rgba(52,211,153,0.07) 0%,rgba(43,113,240,0.05) 35%,rgba(139,92,246,0.02) 70%,transparent 100%);
    filter:blur(80px);
    /* Smoothly fades in over 3 seconds */
    animation:geminiGradientFadeIn 3.0s ease-in-out 4.5s forwards;
}
/* LAYER 2:The Hardware-Accelerated Dynamic Dot Canvas. */
#gemini-matrix-canvas {
    position:absolute;
    bottom:-100px;
    right:-100px;
    width:min(98vw,820px);
    height:min(98vw,820px);
    pointer-events:none;
    z-index:1;
    opacity:0;
    /* CHOREOGRAPHED LIFE CYCLE */
    animation:geminiCanvasLifeCycle 6.1s cubic-bezier(0.25,1,0.5,1) 1.4s forwards;
}
@keyframes geminiGradientFadeIn {
    to {
    opacity:1;
}
}@keyframes geminiCanvasLifeCycle {
    0% {
    opacity:0;
}
12% {
    opacity:1;
}
/* Revealed alongside the diagonal sweep front */
    70% {
    opacity:1;
}
/* Retains complete visibility through active waves */
    100% {
    opacity:0;
}
/* Dissolves seamlessly */}/* VIEW TRANSITIONS (ELEVATOR EFFECT) */::view-transition-old(root),::view-transition-new(root) {
    animation-duration:0.7s;
    animation-timing-function:cubic-bezier(0.16,1,0.3,1);
}
html.slide-up-transition::view-transition-old(root) {
    animation-name:fadeOutUp;
}
html.slide-up-transition::view-transition-new(root) {
    animation-name:fadeInFromBottom;
}
html.slide-down-transition::view-transition-old(root) {
    animation-name:fadeOutDown;
}
html.slide-down-transition::view-transition-new(root) {
    animation-name:fadeInFromTop;
}
@keyframes fadeOutUp {
    to {
    transform:translateY(-10%);
    opacity:0;
}
}@keyframes fadeInFromBottom {
    from {
    transform:translateY(15%);
    opacity:0;
}
to {
    transform:translateY(0);
    opacity:1;
}
}@keyframes fadeOutDown {
    to {
    transform:translateY(15%);
    opacity:0;
}
}@keyframes fadeInFromTop {
    from {
    transform:translateY(-10%);
    opacity:0;
}
to {
    transform:translateY(0);
    opacity:1;
}
}/* ==========================================================================
   GLOBAL ACCESSIBILITY (A11Y)
   ========================================================================== */

/* A11Y MODAL & BACKDROP */
.a11y-backdrop {
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background:rgba(0,0,0,0.3);
    backdrop-filter:blur(5px);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:9999;
    opacity:1;
    transition:opacity 0.3s ease;
}
.a11y-backdrop.hidden {
    opacity:0;
    pointer-events:none;
    visibility:hidden;
}
.a11y-modal {
    background:var(--color-bg);
    width:90%;
    max-width:400px;
    border-radius:24px;
    padding:24px;
    box-shadow:0 20px 40px rgba(0,0,0,0.1);
}
.a11y-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:24px;
    border-bottom:1px solid var(--color-gray-xlight);
    padding-bottom:16px;
    color:var(--color-black);
}
.a11y-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 0;
    font-size:16px;
    font-weight:500;
}
#btn-close-a11y {
    color:var(--color-black) !important;
    opacity:0.7;
    transition:opacity 0.2s;
}
#btn-close-a11y:hover {
    opacity:1;
}
.toggle-label {
    cursor:pointer;
}
.toggle-label input {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}
.toggle-label input:focus-visible + .ios-switch {
    outline:3px solid #2B71F0;
    outline-offset:4px;
    border-radius:30px;
}
.lang-btn:focus-visible,#btn-close-a11y:focus-visible {
    outline:3px solid #2B71F0;
    outline-offset:2px;
    border-radius:6px;
}
.ios-switch {
    width:50px;
    height:30px;
    background:var(--color-gray-xlight);
    border-radius:30px;
    position:relative;
    transition:background 0.3s ease;
}
.ios-switch::after {
    content:'';
    position:absolute;
    top:2px;
    left:2px;
    width:26px;
    height:26px;
    background:#fff;
    border-radius:50%;
    box-shadow:0 2px 4px rgba(0,0,0,0.2);
    transition:transform 0.3s cubic-bezier(0.4,0.0,0.2,1);
}
.toggle-label input:checked + .ios-switch {
    background:#34C759;
}
.toggle-label input:checked + .ios-switch::after {
    transform:translateX(20px);
}
.toggle-group {
    display:flex;
    background:var(--color-gray-xlight);
    border-radius:8px;
    padding:2px;
}
.lang-btn {
    border:none;
    background:transparent;
    padding:6px 16px;
    border-radius:6px;
    cursor:pointer;
    font-family:inherit;
    font-weight:600;
    color:var(--color-gray-med);
    transition:all 0.2s;
}
.lang-btn.active {
    background:var(--color-bg);
    color:var(--color-black);
    box-shadow:0 2px 5px rgba(0,0,0,0.1);
}
/* --- DARK MODE --- */
html.a11y-dark-mode {
    --color-bg:var(--color-player-bg);
    --color-black:#FFFFFF;
    --color-gray-dark:#F5F5F5;
    --color-gray-med:#B2B2B2;
    --color-card-bg:#1C1C1E;
    --color-card-border:rgba(255,255,255,0.1);
}
html.a11y-dark-mode .ios-switch::after {
    background:var(--color-player-bg);
}
html.a11y-dark-mode .metric-value {
    color:#FFFFFF;
}
html.a11y-dark-mode .metric-label {
    color:var(--color-gray-light);
}
html.a11y-dark-mode .btn-secondary-pill {
    border-color:rgba(255,255,255,0.25);
    color:var(--color-gray-light);
}
html.a11y-dark-mode .btn-secondary-pill:hover {
    border-color:#FFFFFF;
    color:#FFFFFF;
}
html.a11y-dark-mode .case-asset-box {
    background-color:#1C1C1E;
}
html.a11y-dark-mode .case-asset-box pre {
    color:#9CDCFE;
}
html.a11y-dark-mode .token.keyword {
    color:#569CD6;
}
html.a11y-dark-mode .token.function {
    color:#DCDCAA;
}
html.a11y-dark-mode .token.parameter {
    color:#9CDCFE;
}
html.a11y-dark-mode .token.string {
    color:#CE9178;
}
html.a11y-dark-mode .token.property {
    color:#9CDCFE;
}
html.a11y-dark-mode .token.comment {
    color:#6A9955;
}
html.a11y-dark-mode .case-toc:hover {
    background-color:#1C1C1E;
}
html.a11y-dark-mode .ai-chat-container {
    background:#1C1C1E;
    --chat-bg:#1C1C1E;
}
html.a11y-dark-mode #ai-chat-input {
    border-color:rgba(255,255,255,0.1);
}
html.a11y-dark-mode .ai-chat-disclaimer {
    background:rgba(255,255,255,0.015);
    color:var(--color-gray-light);
    border-top-color:rgba(255,255,255,0.08);
}
html.a11y-dark-mode .suggestion-chip {
    background-color:#2C2C2E;
    color:#FFFFFF;
    border-color:rgba(255,255,255,0.1);
}
html.a11y-dark-mode .suggestion-chip:hover {
    background-color:#3A3A3C;
}
html.a11y-dark-mode #view-home::before {
    background:radial-gradient(circle,rgba(52,211,153,0.10) 0%,rgba(66,133,244,0.08) 35%,rgba(168,85,247,0.04) 70%,transparent 100%);
}
/* --- HIGH CONTRAST MODE --- */
html.a11y-high-contrast {
    --color-bg:#000000;
    --color-black:#FFFFFF;
    --color-gray-dark:#FFFFFF;
    --color-gray-med:#FFFFFF;
    --color-gray-light:#FFFFFF;
    --color-gray-xlight:#555555;
    --color-card-bg:#FFFFFF;
    --color-card-border:#000000;
}
html.a11y-high-contrast .a11y-modal {
    border:2px solid white;
}
html.a11y-high-contrast .metric-card {
    border:2px solid #000000;
}
html.a11y-high-contrast .metric-value,html.a11y-high-contrast .metric-label {
    color:#000000;
}
html.a11y-high-contrast .btn-secondary-pill {
    border:2px solid #FFFFFF;
    color:#FFFFFF;
}
html.a11y-high-contrast .case-asset-box {
    background-color: #000000 !important; /* Locked to pure black for predictable contrast math */
    border: 2px solid #FFFFFF !important;
}

/* Set the base container text to solid white and unlock system color overrides */
html.a11y-high-contrast .case-asset-box pre,
html.a11y-high-contrast .case-asset-box code {
    color: #FFFFFF !important;
    forced-color-adjust: none !important;
}

/* Ensure all internal tokens unlock forced-colors without assigning a blanket color */
html.a11y-high-contrast .case-asset-box .token {
    forced-color-adjust: none !important;
}

html.a11y-high-contrast .case-asset-box .token.keyword {
    color: #FFFF00 !important; /* Vivid Yellow (~19.6:1 contrast) */
    font-weight: bold !important;
    text-decoration: underline !important; /* Double visual affordance */
}

html.a11y-high-contrast .case-asset-box .token.function {
    color: #00FFFF !important; /* Vivid Cyan (~16.6:1 contrast) */
    font-weight: bold !important;
}

html.a11y-high-contrast .case-asset-box .token.string {
    color: #00FF00 !important; /* Vivid Lime Green (~15.3:1 contrast) */
}

html.a11y-high-contrast .case-asset-box .token.parameter {
    color: #FF9F55 !important; /* High-Luminance Orange (~9.5:1 contrast) */
}

html.a11y-high-contrast .case-asset-box .token.property {
    color: #FF79C6 !important; /* Neon Pink (~9.3:1 contrast) */
}

/* Explicitly targets type definitions, custom classes, and structural interfaces */
html.a11y-high-contrast .case-asset-box .token.class-name,
html.a11y-high-contrast .case-asset-box .token.maybe-class-name,
html.a11y-high-contrast .case-asset-box .token.builtin {
    color: #00FFFF !important; /* Vivid Cyan */
    font-weight: 500 !important;
}

/* Keeps delimiters, punctuation, and logic operators crisp and perfectly white */
html.a11y-high-contrast .case-asset-box .token.punctuation,
html.a11y-high-contrast .case-asset-box .token.operator {
    color: #FFFFFF !important;
}

html.a11y-high-contrast .case-asset-box .token.comment {
    color: #B2B2B2 !important; /* Crisp Gray (~10.5:1 contrast) */
    font-style: italic !important;
}
html.a11y-high-contrast .case-toc:hover {
    border:2px solid white;
    background-color:black;
}
html.a11y-high-contrast .ai-chat-container {
    --chat-bg:#000000;
}
html.a11y-high-contrast .ai-chat-disclaimer {
    background:transparent;
    color:#FFFFFF;
    border-top:2px solid #FFFFFF;
}
html.a11y-high-contrast .suggestion-chip {
    background-color:transparent;
    border:2px solid #FFFFFF;
    color:#FFFFFF;
}
html.a11y-high-contrast #view-home::before,html.a11y-high-contrast #gemini-matrix-canvas {
    display:none !important;
    animation:none !important;
}
/* SHARED HIGH CONTRAST / DARK MODE SVG RULES */
html.a11y-high-contrast .case-thumb-wrapper:focus-visible {
    outline-color:#FFFFFF;
    outline-width:4px;
}
html.a11y-dark-mode .case-thumb-wrapper:focus-visible {
    outline-color:var(--color-bg);
}
html.a11y-high-contrast .a11y-circle-fill,html.a11y-dark-mode .a11y-circle-fill {
    fill:var(--color-black) !important;
}
html.a11y-high-contrast .a11y-text-fill,html.a11y-dark-mode .a11y-text-fill {
    fill:var(--color-bg) !important;
}
html.a11y-high-contrast .a11y-stroke,html.a11y-dark-mode .a11y-stroke {
    stroke:var(--color-black) !important;
}
html.a11y-high-contrast .a11y-text-stroke,html.a11y-dark-mode .a11y-text-stroke {
    fill:var(--color-black) !important;
}

/* --- COMPONENT OVERRIDES: PILLS, CHAT WINDOW & MESSAGES --- */

/* Action Pills & Slider Buttons Fix */
html.a11y-high-contrast .btn-play-pill,
html.a11y-high-contrast .btn-secondary-pill {
    forced-color-adjust: none !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #FFFFFF !important;
}

html.a11y-high-contrast .gallery-pill {
    forced-color-adjust: none !important;
    background-color: #000000 !important;
    color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
}
html.a11y-high-contrast .btn-play-pill span,
html.a11y-high-contrast .btn-secondary-pill span,
html.a11y-high-contrast .btn-secondary-pill svg {
    color: #FFFFFF !important;
}

html.a11y-high-contrast .btn-secondary-pill svg {
    fill: #FFFFFF !important;
}

html.a11y-high-contrast .play-icon-circle {
    background-color: #FFFFFF !important;
}

html.a11y-high-contrast .play-icon-circle svg path {
    fill: #000000 !important;
}

/* 2. AI Chat Container & Header Outline */
html.a11y-high-contrast .ai-chat-container {
    border: 2px solid #FFFFFF !important;
    background-color: #000000 !important;
}

html.a11y-high-contrast .ai-chat-header {
    background-color: #000000 !important;
    border-bottom: 2px solid #FFFFFF !important;
}

html.a11y-high-contrast .ai-chat-header h3,
html.a11y-high-contrast #btn-close-ai {
    color: #FFFFFF !important;
}

/*  AI Chat Messaging Stream Visibility */
html.a11y-high-contrast .msg {
    forced-color-adjust: none !important;
}

/* Bot Messages: Dark mode aesthetic with high border definition */
html.a11y-high-contrast .bot-msg {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
}

/* User Messages: Inverted bright color blocks for fast scannability */
html.a11y-high-contrast .user-msg {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border: 2px solid #FFFFFF !important;
}

/* Case Milestones, Step Trackers & Metric Cards Fix */
html.a11y-high-contrast .metric-card,
html.a11y-high-contrast .milestone-container,
html.a11y-high-contrast .milestone-card,
html.a11y-high-contrast .milestones,
html.a11y-high-contrast .case-milestones {
    forced-color-adjust: none !important;
    background-color: #000000 !important; /* Force down to pure black canvas */
    color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important; /* Crisp high-luminance container shell */
}

/* Ensure all nested labels, steps, and microcopy invert to crisp white */
html.a11y-high-contrast .metric-card *,
html.a11y-high-contrast .milestone-container *,
html.a11y-high-contrast .milestone-card *,
html.a11y-high-contrast .milestones *,
html.a11y-high-contrast .case-milestones * {
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

/* Neutralize any embedded layout container background masks */
html.a11y-high-contrast .milestone-step,
html.a11y-high-contrast .milestone-item {
    background-color: transparent !important;
}

/* Force structural visibility for milestone progress fill tracks/lines */
html.a11y-high-contrast .milestone-progress,
html.a11y-high-contrast .milestone-track-fill,
html.a11y-high-contrast .progress-bar-fill {
    background-color: #FFFFFF !important;
    forced-color-adjust: none !important;
}
/* --- LARGE TEXT MODE --- */
html.a11y-large-text h1 {
    font-size:38px;
}
html.a11y-large-text h2 {
    font-size:34px;
}
html.a11y-large-text h3 {
    font-size:24px;
}
html.a11y-large-text .p1 {
    font-size:22px;
}
html.a11y-large-text .p2 {
    font-size:20px;
}
html.a11y-large-text .custom-subtitle {
    font-size:24px !important;
    line-height:1.2;
}
html.a11y-large-text .ai-chat-disclaimer {
    font-size:13px;
    padding:10px 16px;
}
html.a11y-large-text .suggestion-chip {
    font-size:14px;
    padding:8px 16px;
}
/* --- OTHER MODES --- */
html.a11y-dyslexia * {
    font-family:"Comic Sans MS","Comic Sans",cursive,sans-serif !important;
    letter-spacing:0.05em !important;
    word-spacing:0.1em !important;
}
html.a11y-focus-mode *:focus-visible {
    outline:4px solid #2B71F0 !important;
    outline-offset:4px !important;
    border-radius:4px;
}
html.a11y-reduce-motion * {
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
}
html.a11y-reduce-motion .ios-switch,html.a11y-reduce-motion .ios-switch::after,html.a11y-reduce-motion .a11y-backdrop,html.a11y-reduce-motion .a11y-modal {
    transition:none !important;
    animation:none !important;
}
html.a11y-reduce-motion .view-section.active {
    opacity:1 !important;
}
html.a11y-reduce-motion #gemini-matrix-canvas {
    animation:none !important;
    opacity:0 !important;
}
html.a11y-reduce-motion #view-home::before {
    animation:none !important;
    opacity:1 !important;
    /* Instantly fallback to static layout glow */
}
/* ==========================================================================
   MOBILE RESPONSIVENESS (MAX-WIDTH:768PX)
   ========================================================================== */

@media (max-width:768px) {
    :root {
    --device-h-player:55vh;
}
/* Global Overrides */
    .gallery-item {
    width:70vw !important;
    max-width:260px !important;
    gap:12px;
}
.case-toc {
    display:none !important;
}
.case-thumb-wrapper .gallery-item-logo,.case-media .case-detail-logo {
    top:10px;
    right:10px;
}
#gemini-matrix-canvas {
    width:120vw;
    height:60vh;
    bottom:-50px;
    right:-50px;
}
#view-home::before {
    width:110vw;
    height:55vh;
    bottom:-60px;
    right:-60px;
}
/* STABILITY & SCROLL LOCK */
    #app-container {
    padding:0 !important;
    height:100dvh;
    display:block;
    position:relative;
    overflow:hidden !important;
    overscroll-behavior:none;
}
/* HEADER */
    header {
    position:absolute;
    top:10vh;
    left:0;
    width:100%;
    padding:0 var(--page-padding);
    z-index:50;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:12px;
}
.header-left h1 {
    font-size:28px;
    margin-bottom:2px !important;
    line-height:1.1;
}
.header-left h4 {
    font-size:17px;
    line-height:1.3 !important;
    max-width:85%;
}
.header-right {
    display:flex !important;
    flex-direction:row !important;
    gap:24px !important;
}
/* VIEWS BASE BEHAVIOR */
    .view-section {
    height:100dvh;
    width:100vw;
    display:none;
    flex-direction:column;
    align-items:center;
    overflow:hidden;
}
/* HOME VIEW */
    #view-home.active {
    display:flex !important;
    justify-content:center;
}
#view-home .iphone-17 {
    --device-h-gallery:40vh !important;
}
#view-home .iphone-12 {
    --device-h-gallery:38vh !important;
}
#view-home .iphone-x {
    --device-h-gallery:38vh !important;
}
#view-home .iphone-8 {
    --device-h-gallery:35vh !important;
}
#view-home .apple-watch {
    --device-h-gallery:24vh !important;
}
.gallery-container {
    height:auto;
    min-height:45vh;
    align-items:bottom;
    gap:60px;
    padding-bottom:20px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    margin-top:20vh;
}
/* Reset Inherited Offsets */
    .iphone-17,.iphone-12,.iphone-x,.iphone-8 {
    --device-offset-y:0px !important;
}
.apple-watch {
    --device-offset-y:10px !important;
}
.case-thumb-wrapper {
    margin-bottom:var(--device-offset-y,0px) !important;
}
/* CASE VIEW */
    #view-case.active {
    display:flex !important;
    justify-content:flex-start;
    overflow-y:auto !important;
}
#view-case .iphone-17,#view-case .iphone-12,#view-case .iphone-x,#view-case .iphone-8 {
    --device-h-case:43vh !important;
}
#view-case .apple-watch {
    --device-h-case:35vh !important;
}
#view-case .apple-watch .case-media {
    transform:translateX(3px) !important;
}
/* Apple watch optical adjust */

    /* Case Full Page Scroll */
    .case-slide-wrapper {
    align-items:flex-start !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
}
.case-layout {
    flex-direction:column !important;
    justify-content:flex-start !important;
    height:auto !important;
    min-height:100vh !important;
    padding-top:8vh !important;
    padding-bottom:120px !important;
    width:100% !important;
    overflow:visible !important;
    gap:0 !important;
}
.case-layout.is-scrolled {
    gap:0px !important;
}
.case-layout.is-scrolled .case-media {
    margin-left:0 !important;
    transform:none !important;
    opacity:1 !important;
    display:block !important;
    margin-bottom:24px !important;
}
.case-info-container {
    flex:1 1 auto !important;
    height:auto !important;
    width:100% !important;
    max-width:100% !important;
}
.case-info-scroll {
    height:auto !important;
    overflow-y:visible !important;
    padding:0 !important;
}
.case-info-container::before,.case-info-container::after {
    display:none !important;
}
/* Case Media Unleashed */
    .case-media {
    flex-shrink:0 !important;
    margin-bottom:24px !important;
    position:relative !important;
    display:block !important;
    opacity:1 !important;
    transform:none !important;
    margin-left:0 !important;
    pointer-events:auto !important;
}
.case-info {
    max-width:333px;
    align-items:center;
    gap:20px;
}
/* Mobile Fonts */
    #view-case .case-year-label {
    font-size:13px !important;
    margin-bottom:16px !important;
}
#view-case h2 {
    font-size:22px !important;
    line-height:1.1;
}
#view-case .p1 {
    font-size:16.5px !important;
    line-height:1.4;
}
#view-case .p2 {
    font-size:16px !important;
    color:var(--color-gray-med);
}
#view-case .case-description-body {
    padding-bottom:15vh !important;
    width:100% !important;
    align-items:flex-start !important;
}
/* Case Headers & Actions Alignment */
    #view-case .case-header-row {
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
    width:100% !important;
    gap:16px;
}
#view-case .case-title-block {
    align-items:center !important;
    text-align:center !important;
}
#view-case .btn-play-pill {
    align-self:center !important;
    margin:0 auto !important;
    margin-top:16px !important;
}
#view-case .case-actions-group {
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    width:100% !important;
    gap:10px !important;
    flex-wrap:wrap !important;
    margin:20px auto 0 auto !important;
}
#view-case .case-actions-group .btn-play-pill,#view-case .case-actions-group .btn-secondary-pill {
    align-self:auto !important;
    margin:0 !important;
}
/* Inline Credits */
    #view-case .case-credits {
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:10px 5px !important;
    margin-top:5px !important;
    line-height:1.2 !important;
    width:100% !important;
}
#view-case .case-credits .p2 {
    display:inline-block !important;
    margin:0 !important;
    white-space:nowrap !important;
}
#view-case .case-credits .p2::after {
    content:"" !important;
}
#view-case .case-credits .p2:not(:last-child):not(:nth-last-child(2))::after {
    content:"," !important;
}
#view-case .case-credits .p2:nth-last-child(2)::after {
    content:" \0026" !important;
    margin-left:2px !important;
}
#view-case .case-credits-horizontal {
    text-align:center !important;
    justify-content:center !important;
    width:100% !important;
    line-height:1.5;
}
/* Text & Caption alignment */
    #view-case .case-description-body,#view-case .case-description-body p,#view-case .case-description-body h3,.case-caption {
    text-align:left !important;
}
/* Fixed Slider Dots */
    .slider-dots-container {
    position:fixed !important;
    bottom:20px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    display:flex !important;
    z-index:9999 !important;
    pointer-events:auto !important;
    gap:10px !important;
}
.slider-dot {
    width:8px !important;
    height:8px !important;
    background-color:var(--color-gray-med) !important;
    opacity:0.5 !important;
}
.slider-dot.active {
    opacity:1 !important;
    background-color:var(--color-black) !important;
    transform:scale(1.2) !important;
}
/* PLAYER VIEW */
    #view-player.player-overlay {
    align-items:flex-start !important;
    padding-top:5vh !important;
}
#view-player .iphone-17,#view-player .iphone-12 {
    --device-h-player:67vh !important;
}
#view-player .iphone-x {
    --device-h-player:42vh !important;
}
#view-player .iphone-8 {
    --device-h-player:40vh !important;
}
#view-player .apple-watch {
    --device-h-player:60vh !important;
}
/* Top Pill Player Controls */
    #view-player .player-controls {
    bottom:auto !important;
    top:40px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    background-color:var(--color-player-bg) !important;
    border:1px solid var(--color-bg) !important;
    border-radius:50px !important;
    padding:10px 24px !important;
    box-shadow:0 10px 30px rgba(0,0,0,0.15) !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:20px !important;
    z-index:110 !important;
    width: max-content;
}
/* Subtitles Config */
    .custom-subtitle {
    max-width:95vw !important;
    width:90%;
    bottom:250px;
    font-size:16px !important;
    padding:6px 10px !important;
    line-height:1.2;
    transition:bottom 0.6s cubic-bezier(0.4,0,0.2,1);
}
html.a11y-large-text .custom-subtitle {
    font-size:20px !important;
    bottom:110px;
}
/* A11Y Button & Modal */
    #btn-a11y.floating-a11y-btn {
    top:20px !important;
    right:20px !important;
    width:34px !important;
    height:34px !important;
}
#btn-a11y svg {
    width:20px !important;
    height:20px !important;
}
.a11y-backdrop {
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    height:100dvh !important;
    width:100vw !important;
    padding:20px !important;
}
.a11y-modal {
    margin:0 !important;
    width:100% !important;
    max-width:350px !important;
    max-height:80vh !important;
    overflow-y:auto !important;
}
/* ABOUT VIEW */
    #view-about.active {
    display:flex !important;
    flex-direction:column;
    justify-content:flex-start;
    overflow-y:auto;
    padding-top:0vh;
    padding-bottom:60px;
}
.about-layout {
    flex-direction:column-reverse;
    gap:40px;
    padding:0 var(--page-padding);
    max-width:90%;
}
#view-about .about-content {
    max-width:100% !important;
    text-align:left;
}
.about-image-container {
    width:100% !important;
    height:auto !important;
    aspect-ratio:402 / 279;
    border-radius:0px;
}
#view-about .p1 {
    font-size:16px !important;
    line-height:1.3 !important;
    margin-bottom:16px !important;
}
#view-about .about-links .p2 {
    font-size:14px !important;
}
/* AI CHAT VIEWPORT SYNCHRONIZATION */
    body:has(.ai-chat-container:not(.hidden)) .floating-ai-btn {
    opacity:0 !important;
    pointer-events:none !important;
    transform:scale(0.9) translateY(10px) !important;
    transition:opacity 0.2s ease,transform 0.2s ease !important;
}
.ai-greeting-popup {
    display:none !important;
}
.ai-chat-disclaimer {
    padding:6px 14px;
    background:var(--chat-bg) !important;
}
.ai-chat-suggestions {
    background:var(--chat-bg) !important;
    padding:6px 14px;
}
.ai-chat-container {
    --chat-bg:var(--color-bg,#FFFFFF);
}
.ai-chat-container {
    position:fixed !important;
    width:var(--sv-width,100vw) !important;
    max-width:var(--sv-width,100vw) !important;
    left:var(--sv-left,0px) !important;
    top:var(--sv-top,0px) !important;
    height:var(--sv-height,100dvh) !important;
    bottom:auto !important;
    background:var(--chat-bg) !important;
    z-index:99999999 !important;
    transform:none !important;
    transition:opacity 0.15s ease !important;
    border-radius:0 !important;
    border:none !important;
    box-shadow:none !important;
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    padding-bottom:env(safe-area-inset-bottom) !important;
    overflow:visible !important;
    overscroll-behavior:none !important;
}
.ai-chat-footer {
    position:relative !important;
    flex-shrink:0 !important;
    padding:12px 14px !important;
    width:100% !important;
    box-sizing:border-box !important;
    background:var(--chat-bg) !important;
}
.ai-chat-footer::after {
    content:'' !important;
    position:absolute !important;
    top:100% !important;
    left:-20px !important;
    right:-20px !important;
    height:250px !important;
    background:var(--chat-bg) !important;
    z-index:10 !important;
    pointer-events:none !important;
}
.ai-chat-header {
    flex-shrink:0 !important;
}
.ai-chat-body {
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
}
/* MOBILE CURTAIN GRADIENTS */
    #view-case::before,#view-case::after {
    content:'';
    position:fixed;
    left:0;
    right:0;
    width:100%;
    height:12vh;
    z-index:99;
    pointer-events:none;
}
#view-case::before {
    top:0;
    background:linear-gradient(to bottom,var(--color-bg) 30%,transparent 100%);
}
#view-case::after {
    bottom:0;
    background:linear-gradient(to top,var(--color-bg) 30%,transparent 100%);
}
.slider-dots-container,.floating-back-btn {
    z-index:999 !important;
}
}