/* ==========================================================================
   MacBook Intro Animation Overlay — Hyper-Realistic Edition
   ========================================================================== */

#macbook-intro-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    background-color: #050608;
    /* Background handled by .intro-bg-layer (Epic Design) */
    background-size: cover;
    background-position: center;
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 2500px;
    perspective-origin: 50% 42%;
    overflow: hidden;
    transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 768px) {
    #macbook-intro-overlay {
        perspective: 1500px; /* Riduce la distorsione fisheye su schermi piccoli */
    }
    
    /* Previene i crash di memoria (Out Of Memory) su Safari Mobile durante lo zoom 3D finale */
    .macbook-screen { box-shadow: none !important; }
    .macbook-floor-shadow { filter: blur(2px) !important; opacity: 0.3 !important; }
    .macbook-apple-logo { filter: none !important; box-shadow: 0 0 5px rgba(255,255,255,0.8) !important; }
}

#macbook-intro-overlay.macbook-fade-out {
    opacity: 0;
}

/* ---- Cinematic Background Layers (Epic Design) ---- */
.intro-bg-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.intro-bg-layer.depth-0 {
    background: radial-gradient(circle at 50% 50%, #0d1219 0%, #030406 100%);
}

.intro-bg-layer.depth-1 {
    background: 
        radial-gradient(circle at 20% 30%, rgba(56,131,255,0.12) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(147,51,234,0.08) 0%, transparent 40%);
    filter: blur(40px);
    opacity: 0.8;
    animation: cinematicBreathe 8s infinite alternate ease-in-out;
}

@keyframes cinematicBreathe {
    0% { transform: scale(1) translate(0, 0); opacity: 0.6; }
    100% { transform: scale(1.1) translate(-2%, 2%); opacity: 1; }
}

/* ---- Stage group: everything scales/positions together as one rigid body -- */
.macbook-stage {
    position: relative;
    width: 900px;
    height: 520px;
    flex-shrink: 0; /* IMPEDISCE A FLEXBOX DI SCHIACCIARE IL MODELLO SU SCHERMI STRETTI! */
    transform-style: preserve-3d;
    /* Da chiuso: alziamo di 260px (metà altezza) per centrare la cerniera nello schermo, e lo incliniamo verso la telecamera per vederlo bene dall'alto */
    transform: scale(var(--mb-rest-scale, 0.6)) translateY(-260px) rotateX(-25deg);
    transition: transform 2.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

body.macbook-opening .macbook-stage {
    /* Quando si apre, scende per far spazio allo schermo e si raddrizza frontalmente */
    transform: scale(var(--mb-rest-scale, 0.6)) translateY(0px) rotateX(0deg);
}

body.macbook-zooming .macbook-stage {
    /* Transizione più fluida (epic-design motion) per evitare il motion sickness */
    transition: transform 2.8s cubic-bezier(0.65, 0, 0.05, 1);
}

/* Ground-contact ambient occlusion — a living shadow, not a flat blob */
.macbook-floor-shadow {
    position: absolute;
    left: 50%;
    /* The stage box is only the lid's own height (520px); the base sits
       below it via top:100% and is itself 520px tall, so the true floor
       contact point is ~520px further down than the stage's own bottom edge. */
    bottom: -528px;
    width: 78%;
    height: 46px;
    transform: translateX(-50%) translateZ(-1px);
    background: radial-gradient(ellipse at center,
        rgba(0,0,0,0.55) 0%,
        rgba(0,0,0,0.38) 32%,
        rgba(0,0,0,0.16) 62%,
        rgba(0,0,0,0) 100%);
    filter: blur(6px);
    transition: opacity 0.8s ease, width 1.1s cubic-bezier(0.6,0.02,0.15,1);
    pointer-events: none;
}

body.macbook-zooming .macbook-floor-shadow {
    opacity: 0;
}

/* ==========================================================================
   LID
   ========================================================================== */

.macbook-lid {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    background: #050505;
    border-radius: 20px 20px 2px 2px;
    border: 1px solid #c9cdd3;
    box-shadow:
        inset 0 0 0 16px #0a0a0a,
        0 -1px 2px rgba(255,255,255,0.5);
    transform-origin: bottom center;
    transform: rotateX(-90deg);
    transform-style: preserve-3d;
    z-index: 2;
}

body.macbook-opening .macbook-lid {
    /* Ease più dolce e progressivo (epic-design) */
    animation: macbookLidOpen 2.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Hinge motion with real mechanical character: a brief stick at the start
   (breaking static friction), a fast accelerating swing, then the lid's own
   momentum carries it a couple degrees past flat before the hinge damping
   pulls it back to rest — the same overshoot-and-settle a real hinge has. */
@keyframes macbookLidOpen {
    0%   { transform: rotateX(-90deg); }
    15%  { transform: rotateX(-85deg); }   /* cinematic slow start */
    55%  { transform: rotateX(-15deg); }
    75%  { transform: rotateX(1.5deg); }   /* softer momentum overshoot */
    88%  { transform: rotateX(-0.5deg); }    /* softer damped rebound */
    100% { transform: rotateX(0deg); }
}

/* Outer aluminum shell (lid back) — brushed metal built from stacked gradients:
   a broad form-shadow, a soft diagonal specular sheen, and a fine brushed-grain
   texture running the length of the lid. */
.macbook-lid-back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    border-radius: 20px 20px 2px 2px;
    transform: rotateY(180deg) translateZ(0.5px);
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background:
        linear-gradient(115deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 10%, rgba(255,255,255,0) 88%, rgba(255,255,255,0.25) 100%),
        radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 45%),
        linear-gradient(178deg, #f0f1f3 0%, #d8dbdf 22%, #bcc0c6 48%, #cfd2d7 62%, #e9ebee 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0px, rgba(0,0,0,0.03) 1px, rgba(255,255,255,0) 2px, rgba(255,255,255,0) 4px);
    box-shadow:
        inset 0 0 1px 1px rgba(255,255,255,0.6),
        inset 0 18px 30px -20px rgba(255,255,255,0.5),
        inset 0 -18px 26px -18px rgba(0,0,0,0.25);
}

.macbook-apple-logo {
    width: 46px;
    height: 56px;
    position: relative;
    background:
        radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.35) 35%, rgba(255,255,255,0.05) 60%),
        linear-gradient(160deg, #ffffff 0%, #eef0f3 100%);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 170'><path d='M136 90c-.3-24 19.6-35.5 20.5-36-11.2-16.4-28.6-18.7-34.8-19-14.8-1.5-28.9 8.7-36.4 8.7-7.5 0-19-8.5-31.3-8.2-16 .2-31 9.3-39.2 23.6-16.8 29-4.3 71.9 12 95.4 8 11.5 17.5 24.4 30 23.9 12-.5 16.6-7.7 31.1-7.7 14.5 0 18.6 7.7 31.3 7.5 12.9-.2 21.1-11.7 29-23.3 9.1-13.4 12.9-26.4 13.1-27-0.3-.1-25.1-9.6-25.3-38.4zM111 27.5c6.4-7.8 10.7-18.6 9.5-29.5-9.2.4-20.3 6.1-27 13.9-5.9 6.9-11.1 18-9.7 28.6 10.4.8 21-5.3 27.2-13z' fill='black'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 170'><path d='M136 90c-.3-24 19.6-35.5 20.5-36-11.2-16.4-28.6-18.7-34.8-19-14.8-1.5-28.9 8.7-36.4 8.7-7.5 0-19-8.5-31.3-8.2-16 .2-31 9.3-39.2 23.6-16.8 29-4.3 71.9 12 95.4 8 11.5 17.5 24.4 30 23.9 12-.5 16.6-7.7 31.1-7.7 14.5 0 18.6 7.7 31.3 7.5 12.9-.2 21.1-11.7 29-23.3 9.1-13.4 12.9-26.4 13.1-27-0.3-.1-25.1-9.6-25.3-38.4zM111 27.5c6.4-7.8 10.7-18.6 9.5-29.5-9.2.4-20.3 6.1-27 13.9-5.9 6.9-11.1 18-9.7 28.6 10.4.8 21-5.3 27.2-13z' fill='black'/></svg>");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.55));
    opacity: 0.92;
}

/* Glass panel — realistic anti-glare coating: a soft diagonal sheen plus a
   sharp thin specular line, both of which sweep across the glass as the lid
   opens, exactly as a reflected light source would when a hinged panel
   rotates through it. */
.macbook-screen {
    position: absolute;
    top: 16px; left: 16px; right: 16px; bottom: 38px;
    background: #010101;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 0 0 rgba(56,131,255,0);
    transition: box-shadow 1.8s ease 0.9s;
    backface-visibility: hidden;
    transform: translateZ(1px);
}

body.macbook-opening .macbook-screen {
    box-shadow: 0 0 42px rgba(70,140,255,0.22), 0 0 120px rgba(70,140,255,0.08);
}

.macbook-glass-glint {
    position: absolute;
    inset: 0;
    z-index: 25;
    pointer-events: none;
    background: linear-gradient(115deg,
        rgba(255,255,255,0) 30%,
        rgba(255,255,255,0.10) 46%,
        rgba(255,255,255,0.22) 50%,
        rgba(255,255,255,0.08) 54%,
        rgba(255,255,255,0) 70%);
    transform: translateX(-60%);
    opacity: 0;
}

body.macbook-opening .macbook-glass-glint {
    animation: macbookGlint 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes macbookGlint {
    0%   { transform: translateX(-70%); opacity: 0; }
    10%  { opacity: 0.9; }
    75%  { opacity: 0.55; }
    100% { transform: translateX(55%); opacity: 0; }
}

/* Ambient vignette that sits above the iframe content permanently, selling
   the idea of glass curvature and coating even once content is visible */
.macbook-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 22;
    pointer-events: none;
    box-shadow: inset 0 0 34px rgba(0,0,0,0.55), inset 0 0 3px rgba(255,255,255,0.15);
    border-radius: 6px;
}

.macbook-screen-content {
    width: 100%;
    height: 100%;
    position: relative;
    opacity: 0;
    transition: opacity 1.3s ease 0.85s;
}

body.macbook-opening .macbook-screen-content {
    opacity: 1;
}

.macbook-screen-content iframe {
    width: 1440px; /* Risoluzione esatta 16:10 per MacBook */
    height: 900px;
    transform-origin: top left;
    border: none;
    pointer-events: none;
    background: #fff;
    display: block;
}

.macbook-notch {
    position: absolute;
    top: 0; left: 50%;
    width: 130px; height: 22px;
    background: #030303;
    border-radius: 0 0 13px 13px;
    z-index: 30;
    box-shadow: inset 0 -1px 2px rgba(255,255,255,0.06);
    backface-visibility: hidden;
    transform: translateX(-50%) translateZ(2px);
}

.macbook-logo-bottom {
    position: absolute;
    bottom: 12px; left: 50%;
    color: #4d5157;
    font-size: 10px;
    font-family: -apple-system, 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    backface-visibility: hidden;
    transform: translateX(-50%) translateZ(0.5px);
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

/* ==========================================================================
   BASE
   ========================================================================== */

.macbook-base {
    position: absolute;
    width: 100%;
    height: 520px;
    left: 0;
    top: 100%;
    border-radius: 4px 4px 22px 22px;
    transform-origin: top center;
    transform: rotateX(90deg);
    transform-style: preserve-3d;
    z-index: 1;
    background:
        linear-gradient(100deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 6%, rgba(255,255,255,0) 92%, rgba(255,255,255,0.3) 100%),
        radial-gradient(140% 60% at 50% 0%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 55%),
        linear-gradient(to bottom, #ecedf0 0%, #d3d6db 35%, #b7bbc2 70%, #ced1d6 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.7),
        inset 0 -40px 50px -30px rgba(0,0,0,0.18);
}

/* Deck bezel around the keyboard well — the sunken lip that catches light */
.macbook-base::before {
    content: "";
    position: absolute;
    top: 7%; left: 6.2%; width: 87.6%; height: 48%;
    border-radius: 10px;
    background: linear-gradient(180deg, #16171a 0%, #0c0d0f 100%);
    box-shadow:
        inset 0 6px 18px rgba(0,0,0,0.9),
        inset 0 -1px 0 rgba(255,255,255,0.06),
        0 1px 0 rgba(255,255,255,0.85),
        0 -1px 1px rgba(0,0,0,0.15);
}

/* Keycap texture: a faint grid implying individual keys without the cost
   of hundreds of DOM nodes */
.macbook-keys {
    position: absolute;
    top: 8.6%; left: 7.4%; width: 85.2%; height: 38%;
    border-radius: 6px;
    background-image:
        repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 6.8%),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0px, rgba(255,255,255,0.045) 1px, transparent 1px, transparent 22%),
        linear-gradient(180deg, #232427 0%, #1a1b1e 100%);
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.05);
    opacity: 0.9;
}

/* Trackpad — glass-like glossy surface */
.macbook-trackpad {
    position: absolute;
    top: 58%; left: 35.5%; width: 29%; height: 33%;
    border-radius: 10px;
    background:
        linear-gradient(115deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 30%),
        linear-gradient(to bottom, #dde0e4 0%, #c2c6cc 100%);
    box-shadow:
        inset 0 1px 3px rgba(0,0,0,0.12),
        inset 0 -1px 0 rgba(255,255,255,0.6),
        0 0 0 1px rgba(0,0,0,0.06);
}

.macbook-base-front {
    position: absolute;
    width: 100%;
    height: 12px;
    background: linear-gradient(to right, #8f949b 0%, #c2c6cc 12%, #c2c6cc 88%, #8f949b 100%);
    bottom: 0; left: 0;
    transform-origin: bottom center;
    transform: rotateX(-90deg) translateY(12px);
    border-radius: 0 0 20px 20px;
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.4);
}

.macbook-thumb-groove {
    position: absolute;
    width: 110px;
    height: 8px;
    background: linear-gradient(to bottom, #74787e, #93979d);
    bottom: 10px; left: 50%;
    transform: translateX(-50%);
    border-radius: 8px 8px 0 0;
    box-shadow: inset 0 2px 3px rgba(0,0,0,0.35);
}

/* ==========================================================================
   RESPONSIVE INTEGRITY
   Continuous scale as a function of viewport, not a hard breakpoint jump —
   the model shrinks smoothly and perspective tightens with it so the sense
   of depth never flattens out on small screens.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .macbook-stage,
    .macbook-lid,
    .macbook-glass-glint {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ==========================================================================
   SKIP BUTTON
   ========================================================================== */
.macbook-skip-btn {
    position: absolute;
    bottom: 30px;
    right: 30px;
    z-index: 9999999;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 24px;
    border-radius: 30px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    animation: fadeInSkip 1s forwards 1.5s; /* Appare dopo 1.5s per non distrarre subito */
}
.macbook-skip-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
@keyframes fadeInSkip {
    to { opacity: 1; }
}
@media (max-width: 768px) {
    .macbook-skip-btn {
        bottom: 20px;
        right: 20px;
        font-size: 0.85rem;
        padding: 8px 18px;
    }
}