@property --c1 { syntax: '<color>'; inherits: true; initial-value: #3a1203; }
@property --c2 { syntax: '<color>'; inherits: true; initial-value: #f26a21; }
@property --ink { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
:root { --ease: cubic-bezier(.4, 0, .2, 1); }
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
html, body { min-height: 100%; }
body { font-family: 'Instrument Sans', system-ui, sans-serif; color: #0e2433; background: #f4f7fa; }

/* ===== Full-screen slide ===== */
.deck {
  --c1: #3a1203; --c2: #f26a21; --ink: #fff; --s: min(calc(100svh - 285px), 88vw);
  /* side products: x = distance from centre, s = size vs the main product (0.3 = 30%) */
  --x1: 68%; --x2: 94.5%; --s1: .3; --s2: .22; --op1: .6; --op2: .4; --pe2: auto;
  color: var(--ink);
  position: relative; width: 100%; height: 100svh; min-height: 640px; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto; outline: none;
  background:
    radial-gradient(55% 65% at 50% 46%, rgb(255 255 255 / .12), transparent 70%),
    linear-gradient(45deg, var(--c1) 43%, var(--c2) 100%);
  transition: --c1 1s var(--ease), --c2 1s var(--ease), --ink 1s var(--ease);
}
.deck:fullscreen { min-height: 100%; }

/* top bar: progress + counter */
.top { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; height: 88px; padding: 0 clamp(18px, 4vw, 56px); gap: 16px; }
.brandline { font: 700 clamp(15px, 1.4vw, 19px) 'Bricolage Grotesque', sans-serif; letter-spacing: .01em; opacity: .9; }
.counter { font: 700 16px 'Bricolage Grotesque', sans-serif; min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; }
.bar { position: absolute; left: 0; top: 0; right: 0; height: 4px; background: color-mix(in srgb, var(--ink) 15%, transparent); }
.bar i { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); }

/* giant company name behind the product */
.brandmark {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-62%); text-align: center; pointer-events: none;
  font: 800 clamp(90px, 25vw, 400px)/.85 'Bricolage Grotesque', sans-serif; letter-spacing: -.05em; white-space: nowrap;
  color: color-mix(in srgb, var(--ink) 11%, transparent);
}
.brandmark.itel-spacing {
  letter-spacing: .25em;
}
.brandmark span { display: inline-block; }
.brandmark.swap span { animation: mark .9s var(--ease); }
@keyframes mark { from { opacity: 0; transform: translateY(50px) scale(.94); filter: blur(10px); } }

/* ===== 3D stage ===== */
.stage { position: relative; perspective: 1500px; transform-style: preserve-3d; touch-action: pan-y; min-height: 0; }

/* ===== Navigation arrows on sides ===== */
.nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  backdrop-filter: blur(6px);
  transition: transform .25s var(--ease), background .25s, color .25s;
  z-index: 15;
}
.nav-btn:hover { background: var(--ink); color: var(--c1); transform: translateY(-50%) scale(1.1); }
.nav-btn:active { transform: translateY(-50%) scale(.95); }
.nav-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.nav-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nav-prev { left: clamp(18px, 4vw, 56px); }
.nav-next { right: clamp(18px, 4vw, 56px); }

.nav-tooltip {
  position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--c1);
  padding: 6px 12px; border-radius: 6px;
  font: 600 14px 'Bricolage Grotesque', sans-serif;
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.nav-btn:hover .nav-tooltip { opacity: 1; }

/* Desktop: show side nav buttons, hide footer controls */
@media (min-width: 821px) {
  .nav-btn { display: grid; }
  .foot .ctrl { display: none; }
}

/* Mobile: hide side nav buttons, show footer controls */
@media (max-width: 820px) {
  .nav-btn { display: none; }
}

.item {
  --o: 0; --a: 0; --sg: 0; --x: 0%; --sc: 1; --op: 1;
  position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border: 0; padding: 0; background: none; cursor: pointer; color: inherit;
  transform: translateX(calc(var(--sg) * var(--x))) rotateY(calc(var(--sg) * -24deg)) scale(var(--sc));
  opacity: var(--op); filter: blur(calc(var(--a) * 1.2px)) brightness(calc(1 - var(--a) * .1));
  transition: transform .8s var(--ease), opacity .6s, filter .6s;
  will-change: transform;
}
.item[data-a="2"] { pointer-events: var(--pe2); }
.item:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; border-radius: 16px; }
.item img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 30px 34px rgb(0 0 0 / .45)); user-select: none; }
.item.active img { animation: float 6s ease-in-out infinite; }
/* photos with a white background: an SVG filter turns near-white pixels transparent (no circle needed) */
.item.cut img { filter: url(#cutWhite) drop-shadow(0 30px 34px rgb(0 0 0 / .45)); }
@keyframes float { 50% { transform: translateY(-12px) rotate(-.8deg); } }

/* ===== Bottom: title + description + controls ===== */
.foot {
  position: relative; z-index: 20; display: grid; grid-template-columns: 1.25fr 1fr auto; align-items: end; gap: clamp(20px, 4vw, 64px);
  padding: 0 clamp(18px, 4vw, 56px) clamp(22px, 4vh, 44px);
}
.company { font: 700 clamp(18px, 1.8vw, 26px) 'Bricolage Grotesque', sans-serif; display: flex; align-items: center; gap: 10px; }
.company i { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.title { font: 800 clamp(30px, 4.6vw, 74px)/1 'Bricolage Grotesque', sans-serif; letter-spacing: -.03em; margin-top: 8px; text-wrap: balance; }
.about { font-family: 'Instrument Sans', system-ui, sans-serif; font-size: clamp(15px, 1.35vw, 19px); line-height: 1.55; opacity: .9; max-width: 46ch; }
.cta {
  display: inline-block; margin-top: 16px; padding: 13px 26px; border-radius: 99px; color: var(--c1); background: var(--ink);
  font: 700 16px 'Bricolage Grotesque', sans-serif; text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s;
}
.cta:hover { transform: translateY(-3px); box-shadow: 0 16px 28px -12px rgb(0 0 0 / .5); }
.ctrl { display: flex; gap: 10px; align-items: center; }
.btn {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink);
  background: color-mix(in srgb, var(--ink) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); backdrop-filter: blur(6px);
  transition: transform .25s var(--ease), background .25s, color .25s;
}
.btn:hover { background: var(--ink); color: var(--c1); transform: scale(1.08); }
.btn:active { transform: scale(.94); }
.btn:focus-visible, .cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.btn.fs { width: 44px; height: 44px; } .btn.fs svg { width: 18px; height: 18px; }

/* text swap animation */
.swap-in .company, .swap-in .title, .swap-in .about, .swap-in .cta { animation: rise .8s var(--ease) backwards; }
.swap-in .title { animation-delay: .07s; } .swap-in .about { animation-delay: .14s; } .swap-in .cta { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }

@media (max-width: 820px) {
  .deck {
    --s: min(calc(100svh - 340px), 75vw);
    --x1: 64%;
    --s1: .26;
    --op2: 0;
    --pe2: none;
    grid-template-rows: auto 1fr auto;
  }
  .foot {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0 clamp(18px, 4vw, 56px) clamp(22px, 4vh, 44px);
  }
  .foot > div:first-child {
    order: -1;
    text-align: center;
    margin-bottom: 16px;
  }
  .foot > div:first-child .company {
    display: none !important;
  }
  .foot .about-wrap {
    order: 1;
  }
  .foot .ctrl {
    order: 2;
    justify-content: center;
    display: flex !important;
  }
  .title { font-size: clamp(26px, 8vw, 40px); }
  .about { font-size: 14px; }
  .btn { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } }

/* Fit short laptop windows at normal browser zoom. Image boxes may be wide. */
@media(min-width:821px){
 .deck:not(:fullscreen){--s:min(44vw,600px);height:100svh;min-height:560px;grid-template-rows:88px minmax(180px,1fr) auto}
 .deck .item{--hero-item-height:min(var(--hero-stage-size,var(--s)),var(--s));height:var(--hero-item-height);margin-top:calc(var(--hero-item-height) / -2)}
 .deck .foot{grid-template-columns:1.2fr 1fr;gap:28px}
 .deck .title{font-size:clamp(28px,3vw,48px);line-height:1.08;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
 .deck .about{font-size:clamp(14px,1.2vw,18px)}
}
@media(min-width:821px) and (max-height:680px){.deck:not(:fullscreen){min-height:500px}.deck .foot{padding-bottom:22px}.deck .title{font-size:clamp(26px,2.7vw,38px)}.deck .about{font-size:14px;line-height:1.4}.deck .cta{margin-top:10px;padding:10px 20px}}

.hero-pause{position:absolute;right:clamp(18px,4vw,56px);top:100px;z-index:22;display:grid;place-items:center;width:44px;height:44px;border:1px solid currentColor;border-radius:50%;background:#0e243333;color:var(--ink);cursor:pointer}.hero-pause svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}.hero-pause:focus-visible{outline:3px solid currentColor;outline-offset:3px}@media(prefers-reduced-motion:reduce){.hero-pause{display:none}}

#deck .item{--hero-item-height:min(var(--hero-stage-size,var(--s)),var(--s));height:var(--hero-item-height);margin-top:calc(var(--hero-item-height) / -2)}