/* Cadeaubon OAAS (ontwerp 12/10): één envelop en één kaartje, overal hetzelfde object.
   Gedeeld door de openingspagina (/cadeau/open) en later /cadeaubon. Kleuren enkel uit het huispalet van site.css,
   geen crème of beige. De envelop is iced matcha, de voering demure moss met rimpels, het zegel de ring uit het icoon.
   Lagen in de envelop, van achter naar voor: achterkant (1), kaartje (2), voorvak (3), namen (4), klep (5), zegel (6). */
:root{
  --g-stage:#919348;            /* olijf */
  --g-env:#D7E6C2;              /* iced matcha */
  --g-env-ink:#5A5C2A;          /* inkt op de envelop (olive-dark) */
  --g-liner:#858838;            /* voering (moss) */
  --g-seal:#5A5C2A;             /* zegel (olive-dark) */
  --g-card:#FFFFFF;
  --g-ink:#2B2B22; --g-ink-3:#626254; --g-label:#67692E; --g-hair:rgba(90,92,42,.16);
  --g-night:#1F2015;
  --g-shadow:0 30px 60px -30px rgba(31,32,21,.6),0 2px 6px -1px rgba(31,32,21,.16);
  --g-r:4px;
  --g-ease:cubic-bezier(.2,.7,.2,1);
  --g-sans:"Manrope","Helvetica Neue",Arial,sans-serif;
  --g-head:"Archivo","Manrope","Helvetica Neue",Arial,sans-serif;
  --g-serif:"Newsreader",Georgia,serif;
}

/* ---------- Envelop ---------- */
.genv{position:relative;width:100%;aspect-ratio:1.44;perspective:1100px;-webkit-tap-highlight-color:transparent}
.genv-shadow{position:absolute;inset:0;border-radius:var(--g-r);box-shadow:var(--g-shadow)}
.genv-back{position:absolute;inset:0;z-index:1;border-radius:var(--g-r);background:var(--g-liner);overflow:hidden}
.genv-back>svg,.genv-pocket>svg,.genv-flap>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.genv-flap{position:absolute;left:0;right:0;top:0;height:52%;z-index:5;transform-origin:50% 0;transform:rotateX(0deg);transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.55,0,.25,1),z-index 0s linear .4s}
.genv-face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.genv-face-in{transform:rotateX(180deg)}
.genv-pocket{position:absolute;inset:0;z-index:3;border-radius:var(--g-r);overflow:hidden;pointer-events:none}
.genv-names{position:absolute;left:8%;right:8%;top:67%;z-index:4;text-align:center;color:var(--g-env-ink);pointer-events:none}
.genv-names b{display:block;font-family:var(--g-head);font-stretch:125%;font-weight:500;font-size:21px;line-height:1.1;letter-spacing:-.01em;white-space:nowrap}
.genv-names b.is-wrap,.genv-names span.is-wrap{white-space:normal;text-wrap:balance}
.genv .gw,.gcard .gw{white-space:nowrap}
.genv-names span{display:block;margin-top:7px;font-family:var(--g-sans);font-size:12.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.genv-names .gw{display:inline;margin:0;font:inherit;letter-spacing:inherit}
.genv-names span:empty{display:none}
.genv-seal{position:absolute;left:50%;top:48.5%;z-index:6;width:15.5%;aspect-ratio:1;padding:0;border:0;border-radius:50%;background:var(--g-seal);cursor:pointer;
  transform:translate(-50%,-50%);display:grid;place-items:center;
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.28),inset 0 2px 2px rgba(255,255,255,.12),0 5px 12px -5px rgba(31,32,21,.6);
  animation:g-zegel 9s ease-in-out infinite;transition:opacity .3s var(--g-ease),transform .35s var(--g-ease)}
.genv-seal svg{display:block;width:56%;height:56%}
.genv-seal:focus-visible{outline:2px solid #fff;outline-offset:4px}
/* Het zegel ademt mee met de twee cirkels van de site: 9 s, dezelfde beweging als de ademband. */
@keyframes g-zegel{0%,100%{transform:translate(-50%,-50%) scale(.97)}50%{transform:translate(-50%,-50%) scale(1.04)}}

/* Het kaartje zit echt ín de envelop: achter het voorvak, voor de achterkant. */
.genv .gcard{position:absolute;left:4%;top:8%;width:92%;z-index:2;
  box-shadow:0 1px 2px rgba(31,32,21,.12),0 14px 30px -18px rgba(31,32,21,.55);
  transition:transform .95s cubic-bezier(.2,.75,.2,1) .4s}

/* Open: zegel weg, klep draait achter het kaartje (toont de voering), kaartje schuift omhoog. */
.genv.is-open .genv-seal{opacity:0;transform:translate(-50%,-50%) scale(.9);animation:none;pointer-events:none}
.genv.is-open .genv-flap{transform:rotateX(180deg);z-index:1}
.genv.is-open .gcard{transform:translateY(-58%)}
/* Een envelop die niet open kan (kapotte link): stil, zonder namen. */
.genv.is-still .genv-seal{animation:none;cursor:default;pointer-events:none}
.genv.is-still .genv-names{display:none}

/* ---------- Het kaartje: wit, verhouding 1,6, radius 4px ---------- */
.gcard{position:relative;width:100%;aspect-ratio:1.6;background:var(--g-card);color:var(--g-ink);border-radius:var(--g-r);overflow:hidden;container-type:inline-size;text-align:left}
.gcard-in{position:absolute;inset:0;padding:21px 23px 20px;padding:6.2cqw 6.8cqw 6cqw;display:flex;flex-direction:column}
.gcard-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.gcard-logo{display:block;flex:none;width:72px;height:26px;width:21cqw;height:7.6cqw;background:var(--g-env-ink);
  -webkit-mask:url(../img/logo-olijf.png) left top/contain no-repeat;mask:url(../img/logo-olijf.png) left top/contain no-repeat}
.gcard-amt{font-family:var(--g-head);font-stretch:125%;font-weight:500;font-size:25px;font-size:7.4cqw;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--g-ink);white-space:nowrap}
.gcard-mid{margin-top:auto;min-width:0}
.gcard-to{display:block;font-family:var(--g-head);font-stretch:125%;font-weight:500;font-size:22px;font-size:6.6cqw;line-height:1.08;letter-spacing:-.012em;white-space:nowrap}
.gcard-to.is-wrap{white-space:normal;text-wrap:balance}
.gcard-from{display:block;margin-top:5px;margin-top:1.6cqw;font-family:var(--g-sans);font-size:13px;font-size:3.9cqw;font-weight:600;color:var(--g-ink-3);white-space:nowrap}
.gcard-from.is-wrap{white-space:normal;text-wrap:balance;line-height:1.25}
.gcard-from:empty{display:none}
.gcard-bot{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;gap:4cqw;margin-top:17px;margin-top:5cqw;padding-top:14px;padding-top:4cqw;border-top:1px solid var(--g-hair)}
.gcard-l{display:block;margin-bottom:5px;margin-bottom:1.4cqw;font-family:var(--g-sans);font-size:10px;font-size:2.9cqw;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g-label)}
.gcard-code b{display:block;font-family:var(--g-sans);font-size:22px;font-size:6.6cqw;font-weight:700;letter-spacing:.09em;font-variant-numeric:tabular-nums;line-height:1;color:var(--g-ink);white-space:nowrap}
.gcard-code b i{display:inline-block;width:.4em}
.gcard-code b.is-long{font-size:18px;font-size:5.2cqw}
.gcard-exp{text-align:right}
.gcard-exp b{display:block;font-family:var(--g-sans);font-size:13px;font-size:3.9cqw;font-weight:600;line-height:1.1;color:var(--g-ink);white-space:nowrap}
.gcard-ripple{position:absolute;right:-30%;bottom:-62%;width:78%;aspect-ratio:1;pointer-events:none}
.gcard [hidden]{display:none!important}

@media (prefers-reduced-motion:reduce){
  .genv-seal{animation:none}
  .genv-flap,.genv .gcard,.genv-seal{transition:none!important}
}