/* Ibizahora experience layer — progressive enhancement only. Load after streamline-home.css. */
:root{--exp-sand:#eef4e6;--exp-line:#c9d8bd;--exp-ink:#172d34;--exp-forest:#214735;--exp-lime:#d6f26a;--exp-ease:cubic-bezier(.2,.7,.2,1)}

/* 1 · Hero: slow Ken Burns on the active frame, soft clip reveal on the titles. */
html:root .immersive-home .hero.phase-one-hero .mission-frame.is-active{animation:exp-burns 9s cubic-bezier(.3,.4,.3,1) both;transform-origin:52% 46%;will-change:transform,opacity}
@keyframes exp-burns{from{transform:scale(1)}to{transform:scale(1.08)}}
html:root .immersive-home .hero.phase-one-hero .hero-title,html:root .immersive-home .hero.phase-one-hero .hero-service-title{animation:exp-unveil 1.05s var(--exp-ease) both;animation-delay:.3s}
html:root .immersive-home .hero.phase-one-hero .hero-service-title{animation-delay:.52s}
@keyframes exp-unveil{from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(22px)}60%{opacity:1}to{opacity:1;clip-path:inset(-2% 0 -8% 0);transform:translateY(0)}}

/* 2 · Scroll progress: a lime hairline sitting on the header's lower edge. */
.exp-progress{position:fixed;top:var(--exp-top,0px);left:0;width:100%;height:3px;z-index:29;pointer-events:none;background:var(--exp-lime);transform-origin:0 50%;transform:scaleX(var(--exp-progress,0));will-change:transform}

/* 3 · Scroll-driven reveals (only where supported; otherwise everything stays as authored). */
@supports (animation-timeline:view()){
 .service-carousel-shell,.price-preview>*,.faq details{animation:exp-rise linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
 .price-preview>*:nth-child(2){animation-range:entry 8% entry 38%}
 .price-preview>*:nth-child(3){animation-range:entry 16% entry 46%}
}
@keyframes exp-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* 4 · Island marquee: a quiet ticker of the day's routes. */
.island-marquee{position:relative;overflow:hidden;background:var(--exp-sand);color:var(--exp-ink);border-top:1px solid var(--exp-line);border-bottom:1px solid var(--exp-line);padding:15px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.island-marquee-track{display:flex;width:max-content;align-items:center;white-space:nowrap;animation:exp-marquee 40s linear infinite;will-change:transform}
.island-marquee:hover .island-marquee-track{animation-play-state:paused}
.island-marquee-track>span{font:500 12px/1.4 'DM Sans',Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:0 0 0 30px;display:inline-flex;align-items:center;gap:30px}
.island-marquee-track>span::after{content:'·';color:#80996a;font-size:16px;line-height:1}
@keyframes exp-marquee{to{transform:translateX(-50%)}}

/* 5 · Service cards: light 3D tilt, driven by experience.js on fine pointers only. */
@media (hover:hover) and (pointer:fine){
 html:root .cinematic-home .featured-categories .visual-service{transform-style:preserve-3d;transition:transform .55s var(--exp-ease),border-color .25s,box-shadow .25s}
 html:root .cinematic-home .featured-categories .visual-service.is-tilting{transition-duration:.12s,.25s,.25s}
 html:root .cinematic-home .featured-categories .visual-service.is-tilting .service-visual{transform:scale(1.04)}
}

/* 6 · WhatsApp float: a slow ripple and a label that appears on hover or focus. */
html:root .whatsapp-float::before{content:'';position:absolute;inset:-1px;border-radius:50%;pointer-events:none;animation:exp-ripple 4s cubic-bezier(.2,.6,.4,1) infinite}
@keyframes exp-ripple{0%,18%{box-shadow:0 0 0 0 #075e4659}70%,100%{box-shadow:0 0 0 16px #075e4600}}
html:root .whatsapp-float[data-label]::after{content:attr(data-label);position:absolute;right:calc(100% + 14px);top:50%;transform:translate(6px,-50%);padding:9px 13px;border-radius:6px;background:var(--exp-ink);color:#fbfaf7;font:500 12px/1.3 'DM Sans',Arial,sans-serif;letter-spacing:.02em;white-space:nowrap;box-shadow:0 8px 24px #172d3426;opacity:0;pointer-events:none;transition:opacity .22s var(--exp-ease),transform .22s var(--exp-ease)}
html:root .whatsapp-float[data-label]:hover::after,html:root .whatsapp-float[data-label]:focus-visible::after{opacity:1;transform:translate(0,-50%)}

/* 7 · Lime button: a gentle lift. */
html:root .button.lime{transition:transform .22s var(--exp-ease),background .22s,box-shadow .22s var(--exp-ease)}
html:root .button.lime:hover,html:root .button.lime:focus-visible{transform:translateY(-1px);box-shadow:0 10px 24px -10px #214735a6}

@media (max-width:650px){.island-marquee{padding:12px 0}.island-marquee-track>span{font-size:11px;padding-left:22px;gap:22px}}

/* Reduced motion: nothing moves. */
@media (prefers-reduced-motion:reduce){
 html:root .immersive-home .hero.phase-one-hero .mission-frame.is-active,html:root .immersive-home .hero.phase-one-hero .hero-title,html:root .immersive-home .hero.phase-one-hero .hero-service-title,.service-carousel-shell,.price-preview>*,.faq details,.island-marquee-track,html:root .whatsapp-float::before{animation:none!important}
 .exp-progress{display:none}
 .island-marquee{-webkit-mask-image:none;mask-image:none}
 html:root .cinematic-home .featured-categories .visual-service,html:root .button.lime{transition:none!important;transform:none!important}
 html:root .whatsapp-float[data-label]::after{transition:none!important;transform:translateY(-50%)!important}
}