/* Homepage opening animation. Dark neon scene: Hub wakes up, puts on headphones, scans the store,
   fills a cart, and the cart rolls out as the doors open on the real store. */

.ai-intro { display: none; }
.phub-intro .ai-intro {
	display: block; position: fixed; inset: 0; z-index: 999999; overflow: hidden;
	touch-action: none; overscroll-behavior: contain;
	/* If the script never runs, the overlay removes itself. */
	animation: ai-failsafe 0s linear 7.5s forwards;
}
@keyframes ai-failsafe { to { visibility: hidden; opacity: 0; pointer-events: none; } }
.ai-visual { position: absolute; inset: 0; }

/* Doors */
.ai-door { position: absolute; top: 0; bottom: 0; width: 50.3%; background: #030509; transition: transform .95s cubic-bezier(.77, 0, .18, 1); will-change: transform; }
.ai-door-l { left: 0; background: radial-gradient(circle at 100% 45%, rgba(0, 255, 200, .13), transparent 58%), #030509; }
.ai-door-r { right: 0; background: radial-gradient(circle at 0% 45%, rgba(0, 255, 200, .13), transparent 58%), #030509; }
.ai-seam { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: linear-gradient(180deg, transparent, #6EF3C5 30%, #6EF3C5 70%, transparent); box-shadow: 0 0 16px #6EF3C5; opacity: 0; transition: opacity .3s, transform .9s cubic-bezier(.77, 0, .18, 1); }
.ai-intro.p-launch .ai-seam { opacity: .9; }
.ai-intro.p-open .ai-door-l { transform: translateX(-102%); }
.ai-intro.p-open .ai-door-r { transform: translateX(102%); }
.ai-intro.p-open .ai-seam { opacity: 0; transform: scaleX(14); }
.ai-intro.is-skipped .ai-door { transition-duration: .45s; }

/* Stage */
.ai-stage {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: clamp(.35rem, 2vh, 1rem); padding: 3.6rem 1rem 4.6rem; overflow: hidden; transition: opacity .35s ease;
	--neon: #6EF3C5; --yellow: #FFC72C; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.ai-intro.p-open .ai-stage { opacity: 0; }
.ai-grid { position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(0, 255, 200, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 200, .06) 1px, transparent 1px); background-size: 45px 45px; transform: perspective(600px) rotateX(60deg) scale(1.8); transform-origin: center bottom; animation: ai-grid 12s linear infinite; }
@keyframes ai-grid { to { transform: perspective(600px) rotateX(60deg) scale(1.8) translateY(45px); } }
.ai-corner { position: absolute; width: 22px; height: 22px; border: solid rgba(0, 255, 200, .28); }
.ai-corner.tl { top: 14px; left: 14px; border-width: 1px 0 0 1px; }
.ai-corner.tr { top: 14px; right: 14px; border-width: 1px 1px 0 0; }
.ai-corner.bl { bottom: 14px; left: 14px; border-width: 0 0 1px 1px; }
.ai-corner.br { bottom: 14px; right: 14px; border-width: 0 1px 1px 0; }

.ai-status { position: absolute; top: max(16px, env(safe-area-inset-top)); left: 16px; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid rgba(0, 255, 200, .2); border-radius: 99px; background: rgba(3, 10, 12, .7); color: #8fb0aa; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; }
.ai-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 8px var(--neon); animation: ai-blink 1.4s infinite; }
@keyframes ai-blink { 50% { opacity: .3; } }

/* Core and Hub's face */
.ai-core-wrap { --s: clamp(150px, 29vh, 220px); position: relative; flex: none; width: var(--s); height: var(--s); display: grid; place-items: center; transform: scale(.6); opacity: 0; animation: ai-boot .7s .15s cubic-bezier(.2, 1.2, .4, 1) forwards; }
@keyframes ai-boot { to { transform: scale(1); opacity: 1; } }
.ai-core { position: relative; width: calc(var(--s) * .56); height: calc(var(--s) * .56); border-radius: 50%; display: grid; place-items: center; z-index: 3; animation: ai-float 3s ease-in-out infinite;
	background: radial-gradient(circle at 35% 30%, #cafff5 0%, #3affd9 15%, #00c9a4 38%, #063c35 68%, #020b0a 100%);
	box-shadow: 0 0 22px rgba(0, 255, 200, .7), 0 0 70px rgba(0, 255, 200, .28); }
.ai-core::after { content: ""; position: absolute; inset: -38%; border-radius: 50%; z-index: -1; background: radial-gradient(circle, rgba(0, 255, 200, .4), transparent 65%); animation: ai-glow 2s ease-in-out infinite; }
@keyframes ai-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes ai-glow { 0%, 100% { transform: scale(.85); opacity: .6; } 50% { transform: scale(1.1); opacity: 1; } }
.ai-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(0, 255, 200, .3); pointer-events: none; }
.ai-ring.one { width: calc(var(--s) * .78); height: calc(var(--s) * .78); animation: ai-spin 8s linear infinite; }
.ai-ring.two { width: calc(var(--s) * .93); height: calc(var(--s) * .93); border-style: dashed; opacity: .35; animation: ai-spin 14s linear infinite reverse; }
.ai-ring.three { width: calc(var(--s) * 1.08); height: calc(var(--s) * 1.08); border-color: rgba(0, 170, 255, .14); animation: ai-spin 20s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-data { position: absolute; inset: 0; animation: ai-spin 12s linear infinite; }
.ai-data span { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 8px var(--neon); }
.ai-data span:nth-child(1) { top: 8%; left: 50%; } .ai-data span:nth-child(2) { right: 8%; top: 50%; } .ai-data span:nth-child(3) { bottom: 10%; left: 30%; } .ai-data span:nth-child(4) { left: 6%; top: 40%; }
.ai-face { position: relative; width: 56px; height: 42px; }
.ai-eye { position: absolute; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: #effffb; box-shadow: 0 0 8px #fff, 0 0 16px var(--neon); animation: ai-eye 5s infinite; }
.ai-eye.left { left: 7px; } .ai-eye.right { right: 7px; }
@keyframes ai-eye { 0%, 44%, 49%, 100% { transform: scaleY(1); } 46%, 47% { transform: scaleY(.08); } }
.ai-mouth { position: absolute; left: 50%; bottom: 3px; width: 24px; height: 10px; transform: translateX(-50%); border-bottom: 3px solid #eafff9; border-radius: 0 0 30px 30px; filter: drop-shadow(0 0 5px var(--neon)); }
.ai-phones { position: absolute; inset: -6%; width: 112%; height: 112%; overflow: visible; pointer-events: none; }
.ai-phones .band { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ai-phones .cup { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.ai-intro.p-scan .ai-phones .band { animation: ai-draw .7s ease-out forwards; }
.ai-intro.p-scan .ai-phones .cup { animation: ai-pop .45s .55s cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes ai-draw { to { stroke-dashoffset: 0; } }
@keyframes ai-pop { to { transform: scale(1); } }
.ai-beam { position: absolute; left: 50%; top: 68%; width: 70%; height: 95%; transform: translateX(-50%) scaleY(0); transform-origin: top; clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(110, 243, 197, .55), transparent); opacity: 0; }
.ai-intro.p-scan .ai-beam { animation: ai-beam 1.5s ease-out forwards; }
@keyframes ai-beam { 0% { transform: translateX(-50%) scaleY(0); opacity: 0; } 30% { opacity: .85; } 100% { transform: translateX(-50%) scaleY(1); opacity: 0; } }

/* Products being scanned */
.ai-products { position: relative; display: flex; gap: .55rem; justify-content: center; flex: none; max-width: 100%; }
.ai-chip { width: clamp(84px, 24vw, 108px); display: grid; justify-items: center; gap: .35rem; padding: .6rem .35rem; border: 1px solid rgba(0, 255, 200, .25); border-radius: 14px; background: rgba(6, 20, 24, .85); color: #cfeee8; font-size: 11px; font-weight: 700; line-height: 1.2; text-align: center; opacity: 0; transform: translateY(16px); }
.ai-chip .ico { width: 22px; height: 22px; color: var(--neon); }
.ai-scan { position: absolute; top: -8px; bottom: -8px; left: 0; width: 2px; background: linear-gradient(180deg, transparent, var(--neon), transparent); box-shadow: 0 0 12px var(--neon); opacity: 0; }
.ai-intro.p-scan .ai-scan { animation: ai-scan 1s .15s ease-in-out forwards; }
@keyframes ai-scan { 0% { left: 0; opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.ai-intro.p-scan .ai-chip { animation: ai-chip-in .5s var(--d) cubic-bezier(.2, .9, .3, 1) forwards, ai-chip-lock .45s calc(var(--d) + .5s) ease forwards; }
@keyframes ai-chip-in { to { opacity: 1; transform: none; } }
@keyframes ai-chip-lock { from { border-color: rgba(0, 255, 200, .25); } to { border-color: #FFC72C; box-shadow: 0 0 14px rgba(255, 199, 44, .45); color: #fff; } }
.ai-intro.p-cart .ai-chip { animation: ai-chip-drop .55s calc(var(--d) + .45s) cubic-bezier(.5, 0, .8, .4) both; }
@keyframes ai-chip-drop { from { opacity: 1; transform: none; border-color: #FFC72C; } to { opacity: 0; transform: translateY(calc(100% + 1.6rem)) scale(.2); border-color: #FFC72C; } }

/* Cart assembles, fills, then rolls out */
.ai-cart { position: relative; flex: none; width: clamp(110px, 32vw, 150px); }
.ai-cart svg { display: block; width: 100%; height: auto; overflow: visible; }
.ai-cart .part { opacity: 0; transform-box: fill-box; transform-origin: center; }
.ai-intro.p-cart .ai-cart .handle { animation: ai-from-left .45s .05s cubic-bezier(.2, .9, .3, 1) forwards; }
.ai-intro.p-cart .ai-cart .basket { animation: ai-from-top .5s .15s cubic-bezier(.2, .9, .3, 1) forwards; }
.ai-intro.p-cart .ai-cart .wheel { animation: ai-from-bottom .45s .3s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.ai-intro.p-cart .ai-cart .item.i1 { animation: ai-item .35s 1.0s ease-out forwards; }
.ai-intro.p-cart .ai-cart .item.i2 { animation: ai-item .35s 1.15s ease-out forwards; }
.ai-intro.p-cart .ai-cart .item.i3 { animation: ai-item .35s 1.3s ease-out forwards; }
@keyframes ai-from-left { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes ai-from-top { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: none; } }
@keyframes ai-from-bottom { from { opacity: 0; transform: translateY(24px) rotate(-180deg); } to { opacity: 1; transform: none; } }
@keyframes ai-item { from { opacity: 0; transform: translateY(-20px) scale(.5); } to { opacity: 1; transform: none; } }
.ai-speed { position: absolute; right: 100%; top: 18%; display: grid; gap: 9px; margin-right: 8px; opacity: 0; }
.ai-speed i { display: block; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, #6EF3C5); }
.ai-speed i:nth-child(1) { width: 46px; } .ai-speed i:nth-child(2) { width: 62px; margin-left: -16px; } .ai-speed i:nth-child(3) { width: 38px; }
.ai-intro.p-launch .ai-cart { animation: ai-roll .75s cubic-bezier(.6, 0, .9, .5) forwards; }
.ai-intro.p-launch .ai-speed { opacity: 1; }
@keyframes ai-roll { 0% { transform: translateX(0); } 12% { transform: translateX(-12px); } 100% { transform: translateX(125vw); } }

/* Words */
.ai-content { position: relative; z-index: 2; flex: none; width: 100%; text-align: center; margin-top: .25rem; }
.ai-brand { font-size: 12px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--neon); text-shadow: 0 0 14px rgba(0, 255, 200, .4); overflow-wrap: anywhere; }
.ai-title { margin-top: 8px; font-size: clamp(22px, 5vw, 38px); font-weight: 700; letter-spacing: -1px; color: #e9fffb; }
.ai-subtitle { margin-top: 6px; color: #7f9a96; font-size: 12px; }
.ai-terminal { position: absolute; left: 24px; bottom: 28px; font-family: "Courier New", monospace; color: #47736d; font-size: 10px; line-height: 1.8; text-align: left; }
.ai-terminal div { opacity: 0; animation: ai-line .3s forwards; animation-delay: calc(var(--i) * .6s + .3s); }
.ai-terminal .active { color: var(--neon); }
@keyframes ai-line { to { opacity: 1; } }
.ai-progress-wrap { position: absolute; right: 24px; bottom: 32px; width: 140px; }
.ai-progress-label { display: flex; justify-content: space-between; color: #6d8a85; font: 10px monospace; margin-bottom: 6px; }
.ai-progress { height: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.ai-progress-bar { height: 100%; width: 100%; background: var(--neon); box-shadow: 0 0 10px var(--neon); transform-origin: 0 50%; transform: scaleX(0); animation: ai-progress 2.9s cubic-bezier(.3, .7, .2, 1) forwards; }
@keyframes ai-progress { to { transform: scaleX(1); } }

.ai-skip { position: absolute; z-index: 5; right: 16px; top: max(14px, env(safe-area-inset-top)); min-height: 36px; padding: 0 16px; border-radius: 99px; border: 1px solid rgba(110, 243, 197, .45); background: rgba(3, 10, 12, .75); color: #bfeee3; font: 700 12px/1 system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; opacity: 0; animation: ai-fade .4s .5s forwards; }
.ai-skip:hover, .ai-skip:focus-visible { background: #6EF3C5; color: #03140f; outline: 2px solid #fff; outline-offset: 2px; }
@keyframes ai-fade { to { opacity: 1; } }

/* Smaller screens */
@media (max-width: 640px) {
	.ai-terminal { display: none; }
	.ai-progress-wrap { left: 50%; right: auto; transform: translateX(-50%); bottom: 26px; }
	.ai-status { font-size: 9px; padding: 6px 10px; letter-spacing: 1.4px; }
}
@media (max-height: 620px) {
	.ai-subtitle, .ai-terminal { display: none; }
	.ai-stage { padding-top: 3.2rem; padding-bottom: 3.4rem; gap: .25rem; }
}

/* The store arrives: the page gently settles in as the doors open */
.phub-intro-played .site-header { animation: ai-drop .7s .25s cubic-bezier(.2, .8, .2, 1) both; }
.phub-intro-played .hero-copy > * { animation: ai-rise .85s cubic-bezier(.2, .8, .2, 1) both; }
.phub-intro-played .hero-copy > :nth-child(1) { animation-delay: .2s; }
.phub-intro-played .hero-copy > :nth-child(2) { animation-delay: .3s; }
.phub-intro-played .hero-copy > :nth-child(3) { animation-delay: .4s; }
.phub-intro-played .hero-copy > :nth-child(4) { animation-delay: .5s; }
.phub-intro-played .hero-copy > :nth-child(6) { animation-delay: .6s; }
.phub-intro-played .hero-stage { animation: ai-rise .95s .4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ai-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes ai-drop { from { transform: translateY(-100%); } to { transform: none; } }

@media print { .ai-intro { display: none !important; } }