/* =================================================================
   AL-THILAL — Luxury Digital Invitation
   Palette: cream #F3EAD9 · deep emerald #1F4A3A · antique gold #B8893F
   Display (Arabic): "Aref Ruqaa" — calligraphic, Victorian-Arabic feel
   Accent (Latin):   "Cormorant Garamond" — slim serif, period-correct
   ================================================================= */

:root{
  --cream:        #f4ecdb;
  --emerald:      #1f4a3a;
  --emerald-deep: #14332a;
  --gold:         #c79a4b;
  --gold-soft:    #e3c98b;
  --ink:          #2a241a;

  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);   /* premium "settle" ease */
  --dur-open: 1000ms;
}

*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body{
  width:100%;
  height:100%;
  overflow-x:hidden;
  background:var(--emerald-deep);
  font-family:'Cormorant Garamond', serif;
  color:var(--ink);
}

body{
  /* page-load fade in */
  opacity:0;
  animation:bodyFadeIn 1.1s var(--ease-lux) forwards;
}

@keyframes bodyFadeIn{ to{ opacity:1; } }

button{
  font-family:inherit;
  background:none;
  border:none;
  cursor:pointer;
}

/* ---------------------------------------------------------------
   Screens
   --------------------------------------------------------------- */
.screen{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
}

/* ---------------------------------------------------------------
   Screen 1 — Envelope
   --------------------------------------------------------------- */
#screen-envelope{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:var(--cream);
  transition:opacity var(--dur-open) var(--ease-lux),
             filter var(--dur-open) var(--ease-lux),
             transform var(--dur-open) var(--ease-lux);
  transform-origin:center top;
}

.envelope-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* gentle vignette so the centre logo always reads clearly */
.envelope-overlay{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 50% 62%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 38%, rgba(20,30,20,0.06) 100%);
  pointer-events:none;
}

.envelope-content{
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  /* anchor the tap-text just beneath the medallion in the artwork
     (medallion sits roughly in the lower-middle third of the image) */
  padding-bottom:18vh;
}

/* Invisible circular hit zone aligned over the woman's medallion */
.logo-hit{
  position:relative;
  width:34vw;
  max-width:230px;
  aspect-ratio:1/1;
  border-radius:50%;
  display:block;
  transition:transform 260ms var(--ease-lux);
  -webkit-user-select:none;
  user-select:none;
}

.logo-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  box-shadow:0 0 0 0 rgba(199,154,75,0.0);
  transition:box-shadow 320ms var(--ease-lux), background 320ms var(--ease-lux);
}

/* Desktop hover */
@media (hover:hover){
  .logo-hit:hover{ transform:scale(1.045); }
  .logo-hit:hover .logo-ring{
    box-shadow:0 0 18px 6px rgba(199,154,75,0.35), 0 0 38px 14px rgba(199,154,75,0.16);
    background:radial-gradient(circle, rgba(255,250,235,0.10) 0%, rgba(255,250,235,0) 70%);
  }
}

/* Touch / active press feedback */
.logo-hit:active{ transform:scale(0.94); }
.logo-hit.is-pressed .logo-ring{
  box-shadow:0 0 22px 8px rgba(199,154,75,0.45), 0 0 46px 18px rgba(199,154,75,0.2);
}

/* subtle idle glow so the logo always feels tappable */
.logo-hit::after{
  content:'';
  position:absolute;
  inset:-6%;
  border-radius:50%;
  box-shadow:0 0 14px 2px rgba(199,154,75,0.18);
  animation:idleGlow 3.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes idleGlow{
  0%,100%{ opacity:0.45; }
  50%{ opacity:0.9; }
}

.tap-text{
  margin-top:2.1rem;
  font-family:'Aref Ruqaa', serif;
  font-weight:700;
  font-size:clamp(1.05rem, 4.4vw, 1.55rem);
  letter-spacing:0.04em;
  color:var(--emerald);
  text-shadow:0 1px 0 rgba(255,255,255,0.4);
  animation:pulseText 3.2s ease-in-out infinite;
}

@keyframes pulseText{
  0%,100%{ opacity:0.78; transform:translateY(0); }
  50%{ opacity:1; transform:translateY(-2px); }
}

/* State applied just before transitioning away */
#screen-envelope.is-opening{
  pointer-events:none;
}
#screen-envelope.is-opening .tap-text{
  animation:none;
  opacity:0;
  transition:opacity 320ms ease-out;
}
#screen-envelope.is-opening .logo-hit{
  animation:none;
}

/* Envelope "lid" lift + fade as it hands off to the card */
#screen-envelope.is-leaving{
  opacity:0;
  filter:brightness(1.12);
  transform:scale(1.04) translateY(-2%);
}

/* ---------------------------------------------------------------
   Gold light-sweep — plays once during the open transition
   --------------------------------------------------------------- */
.sweep{
  position:fixed;
  inset:0;
  z-index:50;
  pointer-events:none;
  background:radial-gradient(circle at 50% 58%,
              rgba(255,247,224,0.95) 0%,
              rgba(231,201,139,0.55) 18%,
              rgba(231,201,139,0.0) 45%);
  opacity:0;
  transform:scale(0.2);
}
.sweep.run{
  animation:sweepRun 900ms var(--ease-lux) forwards;
}
@keyframes sweepRun{
  0%{   opacity:0;   transform:scale(0.15); }
  35%{  opacity:1;   transform:scale(0.9); }
  100%{ opacity:0;   transform:scale(2.4); }
}

/* ---------------------------------------------------------------
   Screen 2 — Invitation Card
   --------------------------------------------------------------- */
.screen-card{
  background:var(--emerald-deep);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  opacity:0;
  pointer-events:none;
}

.screen-card.is-active{
  opacity:1;
  pointer-events:auto;
}

.card-scroll{
  width:100%;
  height:100%;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  display:flex;
  justify-content:center;
}

.card-image{
  width:100%;
  max-width:560px;
  height:auto;
  display:block;
  opacity:0;
  transform:scale(0.94) translateY(14px);
  transition:opacity 950ms var(--ease-lux), transform 950ms var(--ease-lux);
}

.screen-card.is-active .card-image{
  opacity:1;
  transform:scale(1) translateY(0);
}

/* ---------------------------------------------------------------
   Scrollbar polish (webkit) — quiet, on-brand
   --------------------------------------------------------------- */
.card-scroll::-webkit-scrollbar{ width:5px; }
.card-scroll::-webkit-scrollbar-thumb{ background:rgba(199,154,75,0.45); border-radius:4px; }
.card-scroll::-webkit-scrollbar-track{ background:transparent; }

/* ---------------------------------------------------------------
   Accessibility — respect reduced motion
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  body{ animation:none; opacity:1; }
  .tap-text{ animation:none; }
  .logo-hit::after{ animation:none; }
  .sweep.run{ animation:none; opacity:0; }
  #screen-envelope, .card-image, .logo-hit, .logo-ring{ transition:opacity 200ms linear; }
}

/* ---------------------------------------------------------------
   Small-height phones — keep tap text comfortably above the dock
   --------------------------------------------------------------- */
@media (max-height: 700px){
  .envelope-content{ padding-bottom:14vh; }
}