/* Home hero (3D carousel), ported from prototype/index.html lines 139-218. Loaded only with the inntek/hero block. */

@layer inntek {
	.inntek-hero{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(42% 26% at 18% 100%,rgba(255,255,255,.85),transparent 70%),radial-gradient(38% 22% at 84% 100%,rgba(255,255,255,.7),transparent 70%),linear-gradient(180deg,var(--inntek-hero-bg-3) 0%,var(--inntek-hero-bg-1) 58%,var(--inntek-hero-bg-2) 88%,var(--inntek-hero-bg-4) 100%);padding-block:clamp(40px,5vw,72px) clamp(36px,4vw,64px)}
	/* Hero là một khối nền xanh nhạt, chuyển sang khối trắng của Sản phẩm bằng đổi màu nền dứt khoát, không phủ mờ lên ảnh */
	.inntek-hero canvas{position:absolute;left:0;right:0;bottom:0;width:100%;height:62%;z-index:-1;pointer-events:none}
	.inntek-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:
	  radial-gradient(48% 40% at 50% 0%,rgba(14,118,188,.10),transparent 70%),
	  radial-gradient(30% 34% at 12% 62%,rgba(14,118,188,.07),transparent 70%),
	  radial-gradient(30% 34% at 88% 62%,rgba(14,118,188,.07),transparent 70%)}
	.inntek-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(12,60,110,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(12,60,110,.045) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(60% 50% at 50% 30%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(60% 50% at 50% 30%,#000 30%,transparent 80%)}
	.inntek-hero__text{display:grid;text-align:center;justify-items:center;perspective:1200px}
	.inntek-hero__slide{grid-area:1/1;display:grid;gap:20px;justify-items:center;opacity:0;visibility:hidden;transform:translateY(18px) rotateX(-14deg);transform-origin:50% 100%;transition:opacity .5s ease-out,transform .7s cubic-bezier(.22,.8,.2,1),visibility .5s}
	.inntek-hero__slide.is-leaving{transform:translateY(-14px) rotateX(12deg);transform-origin:50% 0%;transition-duration:.35s}
	.inntek-hero__slide.is-active{opacity:1;visibility:visible;transform:none}
	.inntek-hero__slide .inntek-tag{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;color:var(--inntek-brand-strong);background:var(--inntek-bg);border:1px solid var(--inntek-line);border-radius:var(--inntek-r-pill);padding:6px 14px 6px 8px;box-shadow:var(--inntek-shadow)}
	.inntek-hero__slide .inntek-tag i{font-style:normal;background:var(--inntek-brand);color:var(--inntek-bg);border-radius:var(--inntek-r-pill);padding:2px 10px;font-size:12.5px}
	.inntek-hero__slide .inntek-h1{font-size:clamp(32px,4.2vw,56px);line-height:1.1;color:var(--inntek-ink);font-weight:700;max-width:20ch;letter-spacing:-.02em}
	.inntek-hero__slide .inntek-h1 em{font-style:normal;color:var(--inntek-brand)}
	.inntek-hero__slide .inntek-hero__sub{font-size:clamp(17px,1.4vw,20px);color:var(--inntek-text);max-width:58ch}
	.inntek-hero__ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:6px}
	.inntek-hero__controls{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:28px}
	.inntek-hero__tabs{display:flex;gap:6px;background:var(--inntek-bg);border:1px solid var(--inntek-line);border-radius:var(--inntek-r-pill);padding:5px;box-shadow:var(--inntek-shadow)}
	.inntek-hero__tab{position:relative;overflow:hidden;white-space:nowrap;border:0;background:none;border-radius:var(--inntek-r-pill);padding:8px 16px;font-size:14px;font-weight:600;color:var(--inntek-muted);transition:color .15s ease-out,background-color .15s ease-out}
	.inntek-hero__tab:hover{color:var(--inntek-ink)}
	.inntek-hero__tab.is-active{background:var(--inntek-brand-soft);color:var(--inntek-brand-strong)}
	.inntek-hero__tab .inntek-progress-bar{position:absolute;left:16px;right:16px;bottom:4px;height:2px;border-radius:2px;background:transparent;overflow:hidden}
	.inntek-hero__tab .inntek-progress-bar i{display:block;height:100%;width:100%;background:var(--inntek-brand);transform-origin:left;transform:scaleX(0)}
	.inntek-hero.is-autoplay .inntek-hero__tab.is-active .inntek-progress-bar i{animation:inntek-fill var(--inntek-hero-dur,7s) linear forwards}
	.inntek-hero.is-paused .inntek-hero__tab.is-active .inntek-progress-bar i{animation-play-state:paused}
	@keyframes inntek-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
	.inntek-hero__pause{width:40px;height:40px;border-radius:50%;border:1px solid var(--inntek-line);background:var(--inntek-bg);color:var(--inntek-ink);display:grid;place-items:center;box-shadow:var(--inntek-shadow)}
	.inntek-hero__pause:hover{border-color:var(--inntek-brand);color:var(--inntek-brand)}
	/* Stage */
	.inntek-hero__stage{position:relative;margin-top:clamp(36px,4vw,56px);height:clamp(300px,40vw,560px);perspective:1800px;perspective-origin:50% 0%}
	/* 3D carousel: scene đi vào từ một phía, xoay quanh trục Y, lùi sâu rồi ra phía đối diện */
	.inntek-hero__stage{--inntek-dir:1}
	.inntek-hero__scene{position:absolute;inset:0;transform-style:preserve-3d;opacity:0;visibility:hidden;transform:translateX(calc(24% * var(--inntek-dir))) translateZ(-480px) rotateY(calc(-32deg * var(--inntek-dir)));transition:transform 1.1s cubic-bezier(.22,.8,.2,1),opacity .8s ease-out,visibility 1.1s}
	.inntek-hero__scene.is-active{opacity:1;visibility:visible;transform:none}
	.inntek-hero__scene.is-leaving{transform:translateX(calc(-24% * var(--inntek-dir))) translateZ(-480px) rotateY(calc(32deg * var(--inntek-dir)))}
	.inntek-hero__rig{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(calc(8deg + var(--inntek-py,0) * -4deg)) rotateY(calc(var(--inntek-px,0) * 6deg));transition:transform .25s ease-out}
	.inntek-device{position:absolute;transform-style:preserve-3d}
	.inntek-device img{width:100%;height:auto;display:block;border-radius:inherit}
	.inntek-hero__scene.is-active .inntek-device{animation:inntek-rise .7s ease-out both}
	.inntek-hero__scene.is-active .inntek-device.inntek-pos-left{animation-delay:.1s}.inntek-hero__scene.is-active .inntek-device.inntek-pos-right{animation-delay:.16s}
	@keyframes inntek-rise{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}
	/* frames */
	.inntek-device--laptop{left:50%;top:0;width:min(58%,820px);transform:translateX(-50%) translateZ(40px)}
	.inntek-device--laptop .inntek-device__screen{background:var(--inntek-bezel);border-radius:16px 16px 6px 6px;padding:12px 12px 14px;box-shadow:0 40px 80px rgba(12,50,90,.22),0 0 0 1px rgba(255,255,255,.06) inset}
	.inntek-device--laptop .inntek-device__screen img{border-radius:6px}
	.inntek-device--laptop .inntek-device__base{height:16px;margin:0 -7%;background:linear-gradient(var(--inntek-device-metal-light),var(--inntek-device-metal));border-radius:0 0 18px 18px;position:relative}
	.inntek-device--laptop .inntek-device__base::before{content:"";position:absolute;left:50%;top:0;width:16%;height:6px;transform:translateX(-50%);background:var(--inntek-device-metal-dark);border-radius:0 0 8px 8px}
	.inntek-device--tablet{width:min(30%,400px)}
	.inntek-device--tablet .inntek-device__screen{background:var(--inntek-bezel);border-radius:22px;padding:12px;box-shadow:0 30px 60px rgba(12,50,90,.2)}
	.inntek-device--tablet .inntek-device__screen img{border-radius:10px}
	.inntek-device--phone{width:min(14%,190px)}
	.inntek-device--phone .inntek-device__screen{background:var(--inntek-bezel);border-radius:30px;padding:8px;box-shadow:0 30px 60px rgba(12,50,90,.22)}
	.inntek-device--phone .inntek-device__screen img{border-radius:23px}
	.inntek-device--tv{left:50%;top:0;width:min(60%,820px);transform:translateX(-50%) translateZ(30px)}
	.inntek-device--tv .inntek-device__screen{background:var(--inntek-tv-bezel);border-radius:12px;padding:10px;box-shadow:0 40px 80px rgba(12,50,90,.24)}
	.inntek-device--tv .inntek-device__screen img{border-radius:4px}
	.inntek-device--tv .inntek-device__stand{width:22%;height:26px;margin:0 auto;background:linear-gradient(var(--inntek-device-metal-mid),var(--inntek-device-metal-dark));clip-path:polygon(30% 0,70% 0,100% 100%,0 100%)}
	.inntek-device.inntek-pos-left{left:0;top:24%;transform:rotateY(18deg) translateZ(-30px);transform-origin:right center}
	.inntek-device.inntek-pos-right{right:0;top:24%;transform:rotateY(-18deg) translateZ(-30px);transform-origin:left center}
	.inntek-device--phone.inntek-pos-left{left:8%;top:14%}.inntek-device--phone.inntek-pos-right{right:8%;top:14%}
	.inntek-float-card{position:absolute;background:rgba(255,255,255,.92);border:1px solid var(--inntek-line);border-radius:var(--inntek-r-lg);box-shadow:var(--inntek-shadow-lift);padding:16px 18px;display:grid;gap:4px;width:min(24%,280px);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
	.inntek-float-card small{font-size:13px;color:var(--inntek-muted)}
	.inntek-float-card b{font-size:16px;color:var(--inntek-ink);line-height:1.35}
	.inntek-float-card .inntek-float-card__row{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--inntek-text)}
	.inntek-float-card .inntek-float-card__row .inntek-icon{font-size:20px;color:var(--inntek-ok)}
	.inntek-float-card.inntek-pos-right{right:3%;top:24%;transform:translateZ(60px);z-index:3}
	.inntek-float-card.inntek-pos-right-2{right:6%;top:52%;transform:translateZ(70px);z-index:3}
	.inntek-float-card.inntek-pos-left{left:3%;top:24%;transform:translateZ(60px);z-index:3}
	.inntek-float-card.inntek-pos-left-2{left:6%;top:54%;transform:translateZ(70px);z-index:3}
	.inntek-caption{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);font-size:12.5px;color:var(--inntek-muted);background:rgba(255,255,255,.8);border-radius:var(--inntek-r-pill);padding:3px 12px;white-space:nowrap}
	.inntek-hero__stage-fade{display:none;background:none;pointer-events:none;z-index:2}
	@media (max-width:900px){
	  .inntek-hero__stage{height:clamp(260px,62vw,440px)}
	  .inntek-device--laptop{width:86%}.inntek-device--tv{width:88%}
	  .inntek-device.inntek-pos-left,.inntek-device.inntek-pos-right,.inntek-float-card{display:none}
	}
	@media (max-width:520px){.inntek-hero__tab{padding:8px 11px;font-size:13.5px}.inntek-hero__tab .inntek-progress-bar{left:11px;right:11px}.inntek-hero__controls{gap:8px}}
}

/* Narrow screens: keep the pause button on screen and let the tab row scroll (the prototype overflows here). */
@layer inntek {
	@media (max-width: 520px) {
		.inntek-hero__controls { max-width: 100%; }
		.inntek-hero__tabs { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
		.inntek-hero__tabs::-webkit-scrollbar { display: none; }
		.inntek-hero__tab, .inntek-hero__pause { flex: none; }
	}
}

/*
 * Reduced motion (constitution IV, approved exception): the hero keeps advancing but slides
 * and scenes only cross-fade; no 3D, no tilt, no device rise. base.css forces every transition
 * to ~0 under reduced motion, so the fade needs !important here (allowed by CLAUDE.md).
 */
@media (prefers-reduced-motion: reduce) {
	@layer inntek {
		.inntek-hero__slide,
		.inntek-hero__scene {
			transform: none !important;
			transition: opacity 0.4s ease, visibility 0.4s !important;
		}
		.inntek-hero__slide.is-leaving,
		.inntek-hero__scene.is-leaving {
			transform: none !important;
		}
		.inntek-hero__scene .inntek-device,
		.inntek-hero__scene .inntek-float-card {
			animation: none !important;
		}
		.inntek-hero.is-autoplay .inntek-hero__tab.is-active .inntek-progress-bar i {
			animation-duration: var(--inntek-hero-dur, 10s) !important;
			animation-iteration-count: 1 !important;
		}
	}
}