/* Oros Optika – "Multifokális mellé a keret ajándék" section (white premium style).
   Final state is the default (no JS, reduced motion, print); start states only under html.motion until .g-run is set. */
.gift[hidden]{display:none}
.gift{position:relative;overflow:hidden;background:linear-gradient(180deg,#eef6fd 0%,#fff 70%);border-block:1px solid var(--line)}
/* the offer is the top of the page while it runs: clear the fixed header; the hero below gets normal spacing.
   When the section hides itself (from 2027-01-01) the hero is the top again with its own header spacing. */
.gift{padding-top:calc(88px + clamp(24px,3.5vw,48px))}
.gift:not([hidden]) ~ .hero{padding-top:clamp(48px,6vw,80px)}
@media(max-width:900px){.gift{padding-top:calc(76px + 24px)}}
.gift .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.g-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px 56px;align-items:center}
.g-visual{margin:0}
.g-svg{display:block;width:100%;height:auto;overflow:visible;transform:perspective(1200px) rotateX(calc(6deg + var(--ty,0deg))) rotateY(calc(-10deg + var(--tx,0deg)));transition:transform .4s var(--ease)}
.g-caption{margin:6px 0 0;text-align:center;font-family:var(--mono,inherit);font-weight:500;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.g-copy h2{font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1;letter-spacing:-.045em}
.g-em{font-family:var(--serif,Georgia,serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:#0a63b4}
.g-sub{margin:18px 0 0;color:var(--muted);font-size:1.05rem;max-width:520px}

/* drawing */
.g-line{fill:none;stroke:#0b1620;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;opacity:0}
.g-line-thin{stroke-width:2}
.g-glass{fill:url(#g-glassfill);opacity:.9}
.g-rim{fill:url(#g-rim-black)}
.g-bridge{fill:none;stroke:#14212c;stroke-width:9;stroke-linecap:round}
.g-temple,.g-hinge{fill:#1b2833}
.g-hinge{fill:#8a99a5}
.g-padarm{fill:none;stroke:#9aa8b3;stroke-width:2;stroke-linecap:round}
.g-pad{fill:rgba(220,230,238,.9);stroke:#9aa8b3;stroke-width:1.5}
.g-shine{fill:none;stroke:rgba(255,255,255,.28);stroke-width:2;stroke-linecap:round}
.g-glint{fill:none;stroke:rgba(255,255,255,.95);stroke-width:4;stroke-linecap:round}
.g-peri{fill:url(#g-blur);opacity:.9}
.g-band{opacity:.92}.g-b1{fill:#cfe6f9}.g-b2{fill:#8cc3ef}.g-b3{fill:#4f9fe3}
.g-zr{opacity:.55}
.g-mark{fill:none;stroke:rgba(11,22,32,.35);stroke-width:1.2}
.g-tick{fill:none;stroke:#7d8b96;stroke-width:1.5;stroke-dasharray:3 4}
.g-lab{font:500 15px var(--mono,ui-monospace,monospace);letter-spacing:.06em;fill:#3d4a54}
.g-string{fill:none;stroke:#7d8b96;stroke-width:2;stroke-linecap:round}
.g-paper{fill:#fff;stroke:#0b1620;stroke-width:2.5}
.g-paper-on{fill:#15803d;stroke:#15803d;stroke-width:2.5}
.g-hole{fill:#eef6fd;stroke:#0b1620;stroke-width:2}
.g-was{font:500 15px var(--mono,ui-monospace,monospace);fill:#e8f6ec;text-decoration:line-through}
.g-num{font:600 34px var(--sans,Inter,sans-serif);letter-spacing:-.04em;fill:#fff}
.g-strike{fill:none;stroke:#dc2626;stroke-width:4;stroke-linecap:round;opacity:0}
.g-gift{font:600 15px var(--sans,Inter,sans-serif);letter-spacing:.02em;fill:#fff}
.g-tag{transform-box:view-box;transform-origin:660px 132px}

/* tiers */
.g-tiers{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.g-tier{position:relative;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 40px -24px rgba(1,35,62,.25);transition:border-color .3s,box-shadow .3s,transform .3s var(--ease)}
.g-pick{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;align-items:center;width:100%;padding:20px 22px;border:0;border-radius:inherit;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.g-pick:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.g-tier:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.g-sel{border-color:#0a63b4;box-shadow:0 0 0 1px #0a63b4,0 18px 50px -24px rgba(10,99,180,.5)}
.g-top.g-sel{border-color:#15803d;box-shadow:0 0 0 1px #15803d,0 18px 50px -24px rgba(21,128,61,.5)}
.g-vis{grid-row:1/3;display:grid;justify-items:center;gap:4px}
.g-lens{display:block;width:104px;height:auto;overflow:visible}
.g-cz{opacity:.92}
.g-field{transform-box:fill-box;transform-origin:50% 0}
.g-amt{font:600 1.25rem/1 var(--sans,Inter,sans-serif);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.g-top .g-amt{color:#15803d}
.g-pick strong{font-size:1.2rem;letter-spacing:-.02em}
.g-pick .g-desc{color:var(--muted);font-size:.95rem}
.g-top{border:2px solid #15803d;box-shadow:0 18px 50px -24px rgba(21,128,61,.45)}
.g-top .g-badge{position:absolute;top:-12px;right:16px;padding:4px 10px;border-radius:999px;background:#15803d;color:#fff;font-family:var(--mono,inherit);font-weight:500;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.g-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:32px}
.g-contact{color:var(--muted)}.g-contact a{color:inherit}
.g-fine{margin:22px 0 0;max-width:860px;color:var(--muted);font-size:.8rem;line-height:1.5}

/* motion: start states (until gift.js adds .g-run), then the 3-step sequence */
html.motion .gift:not(.g-run) .g-line{stroke-dashoffset:1;opacity:1}
html.motion .gift:not(.g-run) .g-rim,html.motion .gift:not(.g-run) .g-bridge,html.motion .gift:not(.g-run) .g-temple,html.motion .gift:not(.g-run) .g-hinge,
html.motion .gift:not(.g-run) .g-glass,html.motion .gift:not(.g-run) .g-pad,html.motion .gift:not(.g-run) .g-padarm,html.motion .gift:not(.g-run) .g-shine,html.motion .gift:not(.g-run) .g-glint{opacity:0}
html.motion .gift.g-run .g-rim,html.motion .gift.g-run .g-bridge,html.motion .gift.g-run .g-temple,html.motion .gift.g-run .g-hinge,
html.motion .gift.g-run .g-glass,html.motion .gift.g-run .g-pad,html.motion .gift.g-run .g-padarm,html.motion .gift.g-run .g-shine,html.motion .gift.g-run .g-glint{animation:g-fade .7s ease-out .9s both}
html.motion .gift:not(.g-run) .g-band,html.motion .gift:not(.g-run) .g-lab,html.motion .gift:not(.g-run) .g-tick,
html.motion .gift:not(.g-run) .g-tag,html.motion .gift:not(.g-run) .g-copy,html.motion .gift:not(.g-run) .g-caption{opacity:0}
html.motion .gift.g-run .g-line{opacity:1;animation:g-draw 1.2s cubic-bezier(.65,0,.35,1) both,g-out .5s ease-out 1.4s forwards}
@keyframes g-out{to{opacity:0}}
@keyframes g-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
html.motion .gift.g-run .g-band,html.motion .gift.g-run .g-lab,html.motion .gift.g-run .g-tick{animation:g-in .6s var(--ease) both}
html.motion .gift.g-run .g-b1,html.motion .gift.g-run .g-l1,html.motion .gift.g-run .g-t1{animation-delay:1.1s}
html.motion .gift.g-run .g-b2,html.motion .gift.g-run .g-l2,html.motion .gift.g-run .g-t2{animation-delay:1.4s}
html.motion .gift.g-run .g-b3,html.motion .gift.g-run .g-l3,html.motion .gift.g-run .g-t3{animation-delay:1.7s}
html.motion .gift.g-run .g-caption{animation:g-in .6s var(--ease) 2s both}
@keyframes g-in{from{opacity:0;transform:translateX(-10px)}}
html.motion .gift.g-run .g-tag{animation:g-hang .5s ease-out 2.1s both,g-swing 1.4s ease-in-out 2.9s forwards}
@keyframes g-hang{from{opacity:0;transform:translateY(-14px)}}
@keyframes g-swing{0%{transform:rotate(0)}25%{transform:rotate(9deg)}55%{transform:rotate(-5deg)}80%{transform:rotate(2deg)}100%{transform:rotate(0)}}
/* tag before the count: white paper, dark 140 € */
html.motion .gift:not(.g-done) .g-paper-on,html.motion .gift:not(.g-done) .g-was,html.motion .gift:not(.g-done) .g-gift{opacity:0}
html.motion .gift:not(.g-done) .g-num{fill:#0b1620}
html.motion .gift:not(.g-done) .g-hole{fill:#fff}
html.motion .gift.g-strike-on .g-strike{opacity:1;animation:g-strike .35s ease-out both}
@keyframes g-strike{from{transform:scaleX(0)}}
.g-strike{transform-box:fill-box;transform-origin:left center}
html.motion .gift.g-done .g-strike{opacity:0;transition:opacity .3s}
html.motion .gift.g-done .g-paper-on,html.motion .gift.g-done .g-was,html.motion .gift.g-done .g-gift{animation:g-fade .5s ease-out both}
@keyframes g-fade{from{opacity:0}}
html.motion .gift.g-run .g-copy{animation:g-up .8s var(--ease) 3.3s both}
@keyframes g-up{from{opacity:0;transform:translateY(18px)}}
html.motion .g-tiers:not(.in) .g-tier{opacity:0;transform:translateY(24px)}
html.motion .g-tiers.in .g-tier{transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.motion .g-tiers.in .g-tier:nth-child(2){transition-delay:.12s}
html.motion .g-tiers.in .g-tier:nth-child(3){transition-delay:.24s}
/* the sharp fields open up one after another */
html.motion .g-tiers:not(.in) .g-field{transform:scaleX(.15)}
html.motion .g-tiers.in .g-field{transition:transform 1.1s var(--ease) .35s}
html.motion .g-tiers.in .g-tier:nth-child(2) .g-field{transition-delay:.6s}
html.motion .g-tiers.in .g-tier:nth-child(3) .g-field{transition-delay:.85s}

/* richer frame */
.g-screw{fill:#d5dee5;stroke:#7d8b96;stroke-width:.8}
.g-bevel{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.5}
.g-sweep{opacity:0}
/* vision zones: the chosen band glows, the others step back */
.g-svg[data-zone] .g-band{opacity:.35;transition:opacity .35s}
.g-svg[data-zone="0"] .g-b1,.g-svg[data-zone="1"] .g-b2,.g-svg[data-zone="2"] .g-b3{opacity:1}
.g-svg[data-zone] .g-lab{transition:fill .3s}
.g-svg[data-zone="0"] .g-l1,.g-svg[data-zone="1"] .g-l2,.g-svg[data-zone="2"] .g-l3{fill:#0a63b4;font-weight:600}
/* controls */
.g-controls{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 22px;margin-top:14px}
.g-controls[hidden]{display:none}
.g-ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.g-zone{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line-strong);background:#fff;color:var(--ink);font:500 .9rem var(--sans,inherit);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.g-zone:hover{border-color:#0a63b4}
.g-zone[aria-pressed="true"]{background:#0a63b4;border-color:#0a63b4;color:#fff}
.g-zone:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.g-hint{margin:36px 0 -22px;color:var(--muted);font-size:.95rem}
.g-hint[hidden]{display:none}
/* countdown */
.g-cd{margin-top:22px}
.g-cd-label{margin:0;color:var(--muted)}
.g-cd-live{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0}
.g-cd-live[hidden]{display:none}
.g-cd-title{flex-basis:100%;font-weight:600;color:#0a63b4}
.g-cd-boxes{display:flex;gap:8px}
.g-cd-box{display:grid;justify-items:center;min-width:70px;padding:10px 10px 8px;border-radius:14px;background:#fff;border:1px solid var(--line-strong);box-shadow:0 10px 30px -20px rgba(1,35,62,.35)}
.g-cd-box b{font:600 1.75rem/1 var(--sans,Inter,sans-serif);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.g-cd-box small{margin-top:4px;font-size:.78rem;color:var(--muted)}
.g-cd-end{font-size:.88rem;color:var(--muted)}
.g-cd-lastday .g-cd-title{color:#b42318}
.g-cd-lastday .g-cd-box{border-color:#f0b4ac}
html.motion .g-flip b{animation:g-flip .5s var(--ease)}
@keyframes g-flip{from{opacity:0;transform:translateY(-8px)}}
/* desktop/laptop: keep the whole offer, the three tier cards included, inside the first screen */
@media(min-width:901px){
  .gift{padding-top:calc(76px + 18px);padding-bottom:40px}
  .g-copy .eyebrow{margin-bottom:10px}
  .g-copy h2{font-size:clamp(2rem,3.1vw,2.9rem)}
  .g-sub{margin-top:12px;font-size:1rem}
  .g-cd{margin-top:14px}
  .g-cd-box{min-width:60px;padding:7px 8px 6px}.g-cd-box b{font-size:1.4rem}
  .g-caption{margin-top:2px}
  .g-controls{margin-top:8px}
  .g-hint{margin:16px 0 -12px;font-size:.92rem}
  .g-tiers{margin-top:20px}
  .g-pick{padding:14px 20px}
  .g-cta{margin-top:22px}
}
/* living frame (motion only): gentle float, light sweep over the lenses */
html.motion .gift.g-live .g-float{animation:g-floaty 6s ease-in-out infinite}
@keyframes g-floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-.4deg)}}
html.motion .gift.g-live .g-shadow{animation:g-shadowy 6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes g-shadowy{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.94);opacity:.8}}
html.motion .gift.g-live .g-sweep{animation:g-sweepy 5.5s ease-in-out 1s infinite}
@keyframes g-sweepy{0%{opacity:0;transform:translateX(0) skewX(-18deg)}12%{opacity:1}45%{opacity:1;transform:translateX(560px) skewX(-18deg)}50%,100%{opacity:0;transform:translateX(560px) skewX(-18deg)}}
html.motion .gift.g-replay .g-tag{animation:g-swing 1.2s ease-in-out both}
.gift.g-paused .g-float,.gift.g-paused .g-shadow,.gift.g-paused .g-sweep{animation-play-state:paused}
@media(max-width:900px){
  .g-grid{grid-template-columns:1fr}
  .g-svg{transform:none}
  .g-tiers{grid-template-columns:1fr;gap:16px}
  .g-copy h2{font-size:clamp(2rem,8vw,2.6rem)}
  .g-lab{font-size:22px}.g-was,.g-gift{font-size:20px}.g-num{font-size:38px}
}
@media(prefers-reduced-motion:reduce){.gift *{animation:none!important;transition:none!important}}
@media print{.gift *{animation:none!important;opacity:1!important}}