/* Sapelli Titanium Gold cinematic first-entry experience — 09.10.2026 */
html.tg-intro-lock,
html.tg-intro-lock body{overflow:hidden!important;overscroll-behavior:none}
.tg-intro-seen #titaniumGoldIntro{display:none!important}
.tg-intro{position:fixed;inset:0;z-index:100000;overflow:hidden;background:#03070c;color:#fff;isolation:isolate;opacity:1;visibility:visible;transition:opacity .72s ease,visibility .72s ease}
.tg-intro.is-closing{opacity:0;visibility:hidden;pointer-events:none}
.tg-intro-stage,.tg-intro-slide{position:absolute;inset:0}
.tg-intro-stage{background:radial-gradient(circle at 50% 42%,#222018 0%,#090b0e 54%,#020305 100%)}
.tg-intro-slide{margin:0;opacity:0;visibility:hidden;transform:none;transition:opacity 1.15s ease,visibility 1.15s ease;will-change:opacity}
.tg-intro-slide.is-active{opacity:1;visibility:visible;z-index:2}
.tg-intro-backdrop,.tg-intro-frame{position:absolute;inset:0;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.tg-intro-backdrop{object-fit:cover;filter:blur(34px) saturate(.86) brightness(.32);transform:scale(1.14);opacity:.88}
.tg-intro-frame{z-index:2;object-fit:contain;filter:drop-shadow(0 28px 46px rgba(0,0,0,.48));transform:none;will-change:filter}
.tg-intro-slide.is-active .tg-intro-backdrop,.tg-intro-slide.is-active .tg-intro-frame{animation:none}
.tg-intro-vignette{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.38),transparent 21%,transparent 72%,rgba(0,0,0,.62)),linear-gradient(90deg,rgba(0,0,0,.28),transparent 24%,transparent 76%,rgba(0,0,0,.28));box-shadow:inset 0 0 130px rgba(0,0,0,.5)}
.tg-intro-light{position:absolute;z-index:4;inset:-35% auto -35% -24%;width:24%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,223,151,.23),transparent);filter:blur(18px);transform:skewX(-13deg);animation:tgLightSweep 7.6s 1.2s ease-in-out infinite}
.tg-intro-grain{position:absolute;z-index:5;inset:0;pointer-events:none;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.tg-intro-skip{position:absolute;z-index:12;top:max(18px,env(safe-area-inset-top));right:max(22px,env(safe-area-inset-right));display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:0 17px;border:1px solid rgba(255,255,255,.32);border-radius:999px;background:rgba(4,7,10,.42);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;font:800 11px/1 Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .25s ease,border-color .25s ease,transform .25s ease}
.tg-intro-skip:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.58);transform:translateY(-1px)}
.tg-intro-skip span{font-size:17px;line-height:1}
.tg-intro-progress{position:absolute;z-index:11;left:max(24px,env(safe-area-inset-left));bottom:max(30px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:7px}
.tg-intro-progress button{position:relative;width:30px;height:3px;padding:0;border:0;border-radius:4px;background:rgba(255,255,255,.25);overflow:hidden;cursor:pointer}
.tg-intro-progress button:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#b77b24,#ffe3a0);transform:scaleX(0);transform-origin:left center}
.tg-intro-progress button.is-active:after{animation:tgProgress 3.8s linear forwards}
.tg-sapelli-cta{position:absolute;z-index:14;right:max(32px,calc((100vw - 1440px)/2));bottom:max(30px,env(safe-area-inset-bottom));display:grid;grid-template-columns:auto 42px;align-items:center;column-gap:18px;min-width:min(370px,calc(100vw - 48px));min-height:76px;padding:14px 16px 14px 24px;border:1px solid rgba(255,218,139,.56);border-radius:20px;background:linear-gradient(135deg,rgba(4,8,12,.9),rgba(15,18,19,.72));box-shadow:0 24px 70px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.09);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:#fff;text-decoration:none;opacity:0;transform:translateY(24px);pointer-events:none;transition:opacity .62s ease,transform .62s ease,border-color .3s ease,box-shadow .3s ease}
.tg-intro.is-guidance .tg-sapelli-cta{opacity:1;transform:none;pointer-events:auto}
.tg-sapelli-cta small{display:block;margin-bottom:6px;color:#d6b66e;font:800 9px/1 Inter,system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase}
.tg-sapelli-cta strong{display:block;font:500 clamp(18px,1.55vw,24px)/1.08 Georgia,"Times New Roman",serif;letter-spacing:-.01em}
.tg-sapelli-cta>span:last-child{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(145deg,#f6d17b,#9a641b);color:#0a0b0c;font-size:23px;transition:transform .3s ease}
.tg-sapelli-cta:hover{border-color:#f6d58f;box-shadow:0 28px 80px rgba(0,0,0,.55),0 0 0 1px rgba(238,191,90,.22)}
.tg-sapelli-cta:hover>span:last-child{transform:translateX(3px)}
.tg-sapelli-cta.is-targeted{animation:tgTargetPulse 1.25s ease-in-out 3}
.tg-guide-cursor{position:fixed;z-index:16;left:0;top:0;width:38px;height:48px;opacity:0;pointer-events:none;will-change:transform,opacity;filter:drop-shadow(0 8px 15px rgba(0,0,0,.6))}
.tg-intro.is-guidance.is-cursor-ready .tg-guide-cursor{opacity:1}
.tg-guide-cursor svg{display:block;width:38px;height:48px;overflow:visible;transform:rotate(-17deg);transform-origin:3px 2px}
.tg-guide-cursor path{fill:#fff;stroke:#0a0c0f;stroke-width:1.8;stroke-linejoin:round}
.tg-guide-cursor span{position:absolute;right:calc(100% + 9px);top:28px;padding:8px 11px;border:1px solid rgba(255,213,122,.52);border-radius:999px;background:rgba(4,7,10,.84);color:#ffe0a0;white-space:nowrap;font:800 10px/1 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.tg-sapelli-cta.is-targeted>span:last-child{animation:tgArrowTarget 1.05s ease-in-out 3}

@keyframes tgBackdropCinema{0%{transform:scale(1.2) translate3d(-1.4%,0,0)}100%{transform:scale(1.1) translate3d(1.4%,0,0)}}
@keyframes tgFrameCinema{0%{transform:scale(1.075) translate3d(0,1.2%,0);filter:drop-shadow(0 30px 48px rgba(0,0,0,.55)) brightness(.84)}35%{filter:drop-shadow(0 30px 48px rgba(0,0,0,.5)) brightness(1)}100%{transform:scale(1.01) translate3d(0,-.6%,0);filter:drop-shadow(0 30px 48px rgba(0,0,0,.44)) brightness(1)}}
@keyframes tgLightSweep{0%,9%{left:-30%;opacity:0}22%{opacity:1}48%{left:116%;opacity:.8}55%,100%{left:116%;opacity:0}}
@keyframes tgProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tgTargetPulse{0%,100%{box-shadow:0 24px 70px rgba(0,0,0,.48),0 0 0 0 rgba(239,193,96,0)}45%{box-shadow:0 24px 70px rgba(0,0,0,.48),0 0 0 9px rgba(239,193,96,.18),0 0 44px rgba(239,193,96,.2)}}
@keyframes tgArrowTarget{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,218,139,0)}45%{transform:scale(1.12);box-shadow:0 0 0 10px rgba(255,218,139,.2)}}

@media (max-width:760px){
  .tg-intro-frame{object-fit:cover;object-position:center}
  .tg-intro-backdrop{filter:blur(22px) brightness(.26);transform:scale(1.18)}
  .tg-intro-vignette{background:linear-gradient(180deg,rgba(0,0,0,.34),transparent 18%,transparent 64%,rgba(0,0,0,.78));box-shadow:inset 0 0 76px rgba(0,0,0,.42)}
  .tg-intro-skip{top:max(11px,env(safe-area-inset-top));right:max(11px,env(safe-area-inset-right));min-height:38px;padding:0 13px;font-size:9px;background:rgba(3,6,9,.62)}
  .tg-intro-progress{left:14px;bottom:calc(112px + env(safe-area-inset-bottom));gap:5px}
  .tg-intro-progress button{width:22px}
  .tg-sapelli-cta{left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));min-width:0;min-height:72px;padding:12px 13px 12px 19px;border-radius:18px}
  .tg-sapelli-cta strong{font-size:19px}
  .tg-guide-cursor span{display:none}
  .tg-guide-cursor{width:31px;height:40px}.tg-guide-cursor svg{width:31px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .tg-intro-slide,.tg-intro-backdrop,.tg-intro-frame,.tg-intro-light,.tg-intro-progress button:after,.tg-sapelli-cta.is-targeted{animation:none!important;transition:none!important}
  .tg-intro-slide.is-active{opacity:1}.tg-intro-light{display:none}.tg-intro-frame{transform:none}
}

