/* Catalogue layout follows the shared TOCOBO / AESTHEIN template. */
:root {
  --telica-red: #c82832;
  --telica-red-dark: #a82029;
  --telica-cream-light: #f8f8f7;
  --telica-ink: #272c30;
  --telica-muted: rgba(39, 44, 48, .68);
  --telica-line: rgba(39, 44, 48, .14);
  --telica-panel: rgba(248, 248, 247, .66);
}
* { box-sizing: border-box; }
html { min-height: 100%; background: #eceeed; }
body { min-height: 100vh; margin: 0; color: var(--telica-ink); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
img { user-select: none; -webkit-user-drag: none; }
.media-backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: linear-gradient(125deg, #eeeae1, #f9f8f5 52%, #e9e9e3); }
.daylight-shadow { position: absolute; inset: -25%; pointer-events: none; opacity: .16; filter: blur(20px); transform: rotate(-28deg); background: repeating-linear-gradient(90deg, transparent 0 16%, #777468 17% 18.3%, transparent 21% 32%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.product-portrait { position: fixed; left: calc((100vw - 620px) / 4); top: 43vh; width: clamp(220px, calc((100vw - 760px) / 2), 360px); transform: translate(-50%, -50%) rotate(-18deg); pointer-events: none; filter: drop-shadow(6px 24px 20px #45403424); }
.product-portrait img { display: block; width: 100%; height: auto; }
@media(max-width:1200px) { .product-portrait { position: relative; left: auto; top: auto; width: 180px; margin: 21px auto 0; transform: rotate(-8deg); filter: drop-shadow(0 12px 12px #45403420); } }
.shell {
  position: relative;
  z-index: 2;
  width: min(100%, 620px);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(42px, env(safe-area-inset-top)) 18px max(34px, env(safe-area-inset-bottom));
  transition:
    opacity 680ms ease,
    transform 680ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.is-ready .shell,
html.has-viewed-brochure .shell {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.hero {
  padding: 8px 4px 26px;
  text-align: center;
}

.eyebrow {
  margin: 0;
  color: var(--telica-red-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand {
  margin: 10px 0 0;
  color: var(--telica-red);
  font-size: clamp(3.4rem, 14vw, 5.8rem);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: 0.02em;
}

.red-line {
  width: 68px;
  height: 2px;
  margin: 22px auto 24px;
  background: var(--telica-red);
}

h2 {
  margin: 0;
  color: var(--telica-ink);
  font-size: 1.24rem;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-copy {
  max-width: 360px;
  margin: 13px auto 0;
  color: var(--telica-muted);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.45;
}

.language-panel {
  padding: 16px;
  border: 1px solid rgba(215, 222, 225, 0.32);
  border-radius: 8px;
  background: var(--telica-panel);
  box-shadow: 0 12px 34px rgba(59, 67, 71, 0.07);
  backdrop-filter: blur(2px);
}

.language-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.language-card {
  position: relative;
  display: grid;
  min-height: 78px;
  align-items: center;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 13px;
  overflow: hidden;
  border: 1px solid var(--telica-line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(248, 248, 247, 0.9), rgba(215, 222, 225, 0.58)),
    rgba(248, 248, 247, 0.72);
  box-shadow: 0 10px 24px rgba(59, 67, 71, 0.075);
  text-decoration: none;
  animation: card-in 420ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: calc(var(--stagger-index, 0) * 38ms);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease,
    background 150ms ease;
}

.language-card:focus-visible,
.language-card:hover {
  border-color: rgba(200, 40, 50, 0.48);
  background:
    linear-gradient(135deg, rgba(248, 248, 247, 0.94), rgba(215, 222, 225, 0.68)),
    rgba(248, 248, 247, 0.82);
  box-shadow: 0 16px 34px rgba(59, 67, 71, 0.13);
  outline: none;
  transform: translateY(-1px);
}

.language-card.is-detected {
  border-color: rgba(200, 40, 50, 0.52);
  box-shadow: 0 12px 30px rgba(200, 40, 50, 0.16);
}

.language-flag {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(59, 67, 71, 0.14);
  border-radius: 50%;
  background: var(--telica-cream-light);
  box-shadow:
    inset 0 0 0 2px rgba(248, 248, 247, 0.72),
    0 8px 18px rgba(59, 67, 71, 0.09);
}

.language-flag img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.language-text {
  display: block;
  min-width: 0;
}

.language-card.is-rtl {
  direction: rtl;
}

.language-card.is-rtl .language-text {
  text-align: right;
}

.detected-badge {
  position: absolute;
  top: 9px;
  right: 10px;
  color: var(--telica-red);
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.language-native {
  display: block;
  min-width: 0;
  color: var(--telica-ink);
  font-size: clamp(0.98rem, 4vw, 1.08rem);
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.language-english {
  display: block;
  margin-top: 7px;
  color: var(--telica-muted);
  font-size: 0.73rem;
  font-weight: 750;
  line-height: 1.2;
  text-transform: uppercase;
}


.brand img { display: block; width: 100%; height: .88em; object-fit: contain; margin: 0 auto; mix-blend-mode: multiply; }
dialog{border:0;border-radius:5px;padding:0;max-width:760px;width:calc(100% - 32px);max-height:calc(100svh - 40px);background:#f7f6f3;color:#191919}dialog::backdrop{background:#151512bb;backdrop-filter:blur(8px)}.brochure-bar{display:flex;align-items:center;justify-content:space-between;padding:24px 32px;border-bottom:1px solid #dcd9d2;position:sticky;top:0;background:#f7f6f3;z-index:2}.brochure-bar>img{width:120px}.brochure-bar button{font-size:30px;line-height:1;width:38px;height:38px}.brochure-content{padding:38px 48px 45px}.brochure-content .eyebrow{justify-content:flex-start;color:#be202a}.brochure-content h2{font-size:42px;line-height:1.1;letter-spacing:-1.6px;margin:0 0 20px}.brochure-intro{font-size:16px;line-height:1.8;color:#5b5852}.brochure-product{background:#eeede8;display:flex;flex-direction:column;align-items:center;padding:0 20px 24px;margin:25px 0}.brochure-product>img{width:300px;max-width:100%;height:auto;mix-blend-mode:multiply}.brochure-product>span{font-size:9px;color:#716b63}.product-section{padding:22px 0;border-top:1px solid #d5d1c8;display:grid;grid-template-columns:30px 1fr;gap:15px}.product-section>span{font-size:10px;color:#ca2d34;padding-top:7px}.product-section h3{margin:0;font-size:23px;font-weight:500}.product-section p{font-size:14px;line-height:1.8;color:#676158;margin:10px 0 0}.brochure-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.brochure-actions a{border:1px solid #bdb7ac;font-size:13px;padding:15px 20px}.brochure-actions a:first-child{background:#20201d;color:#fff;border-color:#20201d}.brochure-actions a:hover{border-color:#ca2d34}
.brochure-bar > img { height: auto; }
.brochure-bar button { border: 0; background: none; }
.brochure-content .eyebrow { margin-bottom: 20px; }
.brochure-actions a { text-decoration: none; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--telica-red); outline-offset: 3px; }
@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 430px) {
  .shell {
    padding: 30px 12px 72px;
  }

  .hero {
    padding-bottom: 20px;
  }

  .language-panel {
    padding: 10px;
  }

  .language-grid {
    gap: 8px;
  }

  .language-card {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    min-height: 74px;
    padding: 12px 10px;
  }

  .language-flag {
    width: 34px;
    height: 34px;
  }
}


@media (max-width: 640px) {
  .brochure-bar { padding: 16px 20px; }
  .brochure-content { padding: 28px 23px 35px; }
  .brochure-content h2 { font-size: 32px; letter-spacing: -1px; }
  .brochure-intro { font-size: 14px; }
  .product-section h3 { font-size: 21px; }
  .brochure-actions a { flex: 1; text-align: center; font-size: 12px; padding: 13px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* The approved film plays once, then reveals the existing catalogue. */
.intro[hidden] { display: none !important; }
.intro { position: fixed; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; background: #b8ad9b; transition: opacity 650ms ease; }
.intro::before { content: ""; position: absolute; inset: -24px; background: url("assets/telica-intro-poster.webp") center / cover; filter: blur(20px); }
#intro-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro.is-leaving { opacity: 0; }
body.intro-active { overflow: hidden; }
body.is-intro .hero, body.is-intro .language-panel { opacity: 0; }
.hero, .language-panel { transition: opacity 650ms ease; }
/* A full-height portrait crop would cut the ESL's sides off. */
@media (max-aspect-ratio: 4/5) {
  #intro-video { top: 50%; height: min(100%, 110vw); transform: translateY(-50%); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
}
@media(prefers-reduced-motion:reduce) { .intro { display: none!important; } body.is-intro .hero, body.is-intro .language-panel { opacity: 1; } }