/* =========================================================
   For You — a vintage love-letter site
   Soft, romantic, old-style. Not modern.
   ========================================================= */

:root{
  --paper:        #f5e9d8;   /* warm cream */
  --paper-deep:   #ecdcc4;   /* aged page */
  --paper-edge:   #e2cdab;
  --ink:          #5c4632;   /* sepia ink */
  --ink-soft:     #7c6650;
  --rose:         #c08484;   /* dusty rose */
  --rose-deep:    #a35d5d;
  --rose-pale:    #e7c4c0;
  --gold:         #bd9a52;
  --gold-deep:    #9c7d3c;
  --sage:         #9aa483;
  --shadow:       rgba(92, 70, 50, .25);
}

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; min-height:100%; }

body{
  font-family:'Cormorant Garamond', Georgia, serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 18% 12%, rgba(231,196,192,.55), transparent 42%),
    radial-gradient(circle at 84% 20%, rgba(189,154,82,.30), transparent 46%),
    radial-gradient(circle at 50% 100%, rgba(154,164,131,.30), transparent 55%),
    linear-gradient(160deg, #f7eede 0%, #efe0c9 60%, #e8d6ba 100%);
  background-attachment:fixed;
  position:relative;
  overflow-x:hidden;
}

/* faint paper grain */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  opacity:.06;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(92,70,50,.4) 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(92,70,50,.3) 3px 4px);
  mix-blend-mode:multiply;
  z-index:0;
}
/* soft vignette */
body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  box-shadow: inset 0 0 220px rgba(92,70,50,.35);
}

/* ---------- screen switching ---------- */
#loginScreen, #categoriesScreen, #categoryScreen{ display:none; }
.screen-login      #loginScreen{ display:flex; }
.screen-categories #categoriesScreen{ display:block; }
.screen-category   #categoryScreen{ display:block; }

/* ---------- ornaments / shared ---------- */
.ornament{
  font-family:'Cormorant Garamond', serif;
  color:var(--gold-deep);
  font-size:1.8rem;
  letter-spacing:.4rem;
  margin:0 0 .2rem;
}
.ornament.small{ font-size:1.2rem; opacity:.8; }

/* =========================================================
   LOGIN
   ========================================================= */
.login-wrap{
  position:relative; z-index:2;
  min-height:100vh;
  align-items:center; justify-content:center;
  padding:2rem;
}
.login-card{
  width:min(420px, 92vw);
  text-align:center;
  padding:3rem 2.4rem 2.6rem;
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 100%);
  border:1px solid var(--paper-edge);
  border-radius:6px;
  box-shadow:
    0 2px 0 rgba(255,255,255,.5) inset,
    0 22px 50px -18px var(--shadow),
    0 0 0 10px rgba(245,233,216,.45);
  animation:rise .9s ease both;
}
.login-title{
  font-family:'Tangerine', cursive;
  font-weight:700;
  font-size:5rem;
  line-height:.8;
  margin:.2rem 0 .4rem;
  color:var(--rose-deep);
  text-shadow:0 2px 0 rgba(255,255,255,.4);
}
.login-sub{
  font-style:italic;
  color:var(--ink-soft);
  margin:0 0 2rem;
  font-size:1.15rem;
}
.field{ text-align:left; margin:0 0 1.2rem; }
.field label{
  display:block;
  font-style:italic;
  font-size:1.05rem;
  color:var(--rose-deep);
  margin:0 0 .35rem;
  letter-spacing:.02rem;
}
.field input{
  width:100%;
  padding:.7rem .9rem;
  font-family:'Cormorant Garamond', serif;
  font-size:1.15rem;
  color:var(--ink);
  background:rgba(255,255,255,.45);
  border:none;
  border-bottom:1.5px solid var(--gold);
  border-radius:3px 3px 0 0;
  outline:none;
  transition:background .3s, border-color .3s;
}
.field input:focus{
  background:rgba(255,255,255,.75);
  border-color:var(--rose-deep);
}

.btn-primary{
  margin-top:.6rem;
  width:100%;
  padding:.85rem 1rem;
  font-family:'Cormorant Garamond', serif;
  font-size:1.25rem;
  font-style:italic;
  letter-spacing:.03rem;
  color:#fff6ec;
  cursor:pointer;
  border:none;
  border-radius:40px;
  background:linear-gradient(180deg, var(--rose) 0%, var(--rose-deep) 100%);
  box-shadow:0 8px 18px -8px var(--rose-deep), 0 1px 0 rgba(255,255,255,.3) inset;
  transition:transform .2s, box-shadow .2s, filter .2s;
}
.btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.btn-primary:active{ transform:translateY(0); }

.login-error{ color:var(--rose-deep); min-height:1.4rem; margin:.9rem 0 0; font-style:italic; }
.login-hint{ color:var(--ink-soft); opacity:.8; font-size:.95rem; margin:.2rem 0 0; }

/* =========================================================
   PAGES (categories + one category)
   ========================================================= */
.page{ position:relative; z-index:2; padding:3rem 1.5rem 5rem; max-width:1100px; margin:0 auto; animation:fade .7s ease both; }
.page-head{ text-align:center; margin:0 auto 2.6rem; max-width:680px; position:relative; }
.page-title{
  font-family:'Tangerine', cursive;
  font-weight:700;
  font-size:4.4rem;
  line-height:.85;
  margin:.1rem 0 .3rem;
  color:var(--rose-deep);
  text-shadow:0 2px 0 rgba(255,255,255,.4);
}
.page-sub{ font-style:italic; font-size:1.25rem; color:var(--ink-soft); margin:0; }

.btn-back{
  display:inline-block;
  margin:0 0 1.4rem;
  background:none; border:none; cursor:pointer; padding:0;
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:1.1rem; color:var(--rose-deep);
  transition:opacity .2s, transform .2s;
}
.btn-back:hover{ opacity:.7; transform:translateX(-3px); }

/* ---------- category cards (the "drawers") ---------- */
.cat-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.6rem;
}
.cat-card{
  position:relative;
  width: 240px;
  text-align:center;
  padding:2.1rem 1.4rem 1.7rem;
  cursor:pointer;
  background:linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 100%);
  border:1px solid var(--paper-edge);
  border-radius:5px;
  box-shadow:0 14px 28px -16px var(--shadow), 0 1px 0 rgba(255,255,255,.5) inset;
  transition:transform .25s ease, box-shadow .25s ease;
  overflow:hidden;
  animation:rise .7s ease both;
}
.cat-card::after{ /* gilt corner flourish */
  content:"❧";
  position:absolute; right:.7rem; bottom:.4rem;
  color:var(--gold); opacity:.35; font-size:1.3rem;
}
.cat-card:hover{ transform:translateY(-6px); box-shadow:0 24px 40px -18px var(--shadow); }
.cat-num{
  font-family:'Parisienne', cursive;
  color:var(--gold-deep);
  font-size:1.5rem; line-height:1;
  margin-bottom:.4rem;
}
.cat-name{
  font-size:1.5rem;
  font-weight:600;
  color:var(--ink);
  margin:.1rem 0 .5rem;
  line-height:1.15;
}
.cat-count{ font-style:italic; color:var(--rose-deep); font-size:1rem; }

/* =========================================================
   ITEMS — envelopes & gift boxes
   ========================================================= */
.item-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap:2.4rem 2rem;
}
.item{
  width:200px;
  text-align:center;
  cursor:pointer;
  animation:rise .7s ease both;
}
.item-art{
  position:relative;
  width:170px; height:130px;
  margin:0 auto .8rem;
  transition:transform .3s ease;
}
.item:hover .item-art{ transform:translateY(-6px) rotate(-1deg); }
.item-label{
  font-style:italic;
  font-size:1.18rem;
  color:var(--ink);
  line-height:1.2;
  max-width:200px; margin:0 auto;
}
.item.opened .item-art{ filter:saturate(.7) brightness(.98); }

.tag{ display:none; }

.item.opened .tag{
  display:block;
  position:absolute; top:-10px; right:-6px;
  font-family:'Parisienne', cursive;
  font-size:.95rem; color:var(--rose-deep);
  background:var(--paper);
  border:1px solid var(--paper-edge);
  padding:.05rem .5rem; border-radius:20px;
  box-shadow:0 4px 10px -6px var(--shadow);
}

/* ---- ENVELOPE (CSS art) ---- */
.envelope{ position:absolute; inset:0; }
.env-body{
  position:absolute; inset:0;
  background:linear-gradient(160deg, #f3e3cb, #e8d3b3);
  border:1px solid var(--paper-edge);
  border-radius:5px;
  box-shadow:0 12px 22px -14px var(--shadow);
}
.env-pocket{ /* bottom triangle (front) */
  position:absolute; inset:0; z-index:3;
  background:linear-gradient(180deg, #efdcbf, #e3cda8);
  clip-path:polygon(0 100%, 100% 100%, 50% 42%);
  border-radius:0 0 5px 5px;
}
.env-side{ position:absolute; inset:0; z-index:2; background:#ecd7b6; }
.env-side.l{ clip-path:polygon(0 0, 0 100%, 50% 50%); }
.env-side.r{ clip-path:polygon(100% 0, 100% 100%, 50% 50%); }
.env-flap{ /* top flap that lifts on hover */
  position:absolute; inset:0; z-index:4;
  background:linear-gradient(180deg, #f0ddc1, #e6d0ad);
  clip-path:polygon(0 0, 100% 0, 50% 60%);
  transform-origin:top center;
  transition:transform .5s ease;
  border-radius:5px 5px 0 0;
}
.item:hover .env-flap{ transform:scaleY(-.85) translateY(2px); z-index:1; }
.seal{
  position:absolute; left:50%; top:48%; z-index:5;
  width:40px; height:40px; transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #c47373, var(--rose-deep) 70%);
  box-shadow:0 4px 8px -3px rgba(92,70,50,.6), 0 0 0 2px rgba(255,255,255,.15) inset;
  display:grid; place-items:center;
  color:#fff0ec; font-family:'Parisienne', cursive; font-size:1.4rem;
  transition:transform .4s ease, opacity .4s ease;
}
.item:hover .seal{ transform:translate(-50%,-50%) scale(1.06); }

/* ---- GIFT BOX (CSS art) ---- */
.giftbox{ position:absolute; inset:0; }
.box-base{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:128px; height:82px;
  background:linear-gradient(180deg, #d99393, #bd7373);
  border-radius:4px;
  box-shadow:0 12px 22px -14px var(--shadow), 0 -2px 0 rgba(255,255,255,.15) inset;
}
.box-lid{
  position:absolute; left:50%; bottom:78px; transform:translateX(-50%);
  width:146px; height:30px;
  background:linear-gradient(180deg, #e0a0a0, #cf8585);
  border-radius:5px;
  transform-origin:bottom center;
  transition:transform .45s ease, bottom .45s ease;
  z-index:3;
}
.item:hover .box-lid{ transform:translateX(-50%) rotate(-7deg); bottom:88px; }
.ribbon-v{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:18px; height:112px; z-index:2;
  background:linear-gradient(90deg, #d8b75c, var(--gold) 50%, #a8852f);
}
.bow{
  position:absolute; left:50%; bottom:96px; transform:translateX(-50%); z-index:4;
}
.bow::before, .bow::after{
  content:""; position:absolute; top:0;
  width:22px; height:20px;
  background:linear-gradient(180deg, var(--gold), var(--gold-deep));
  border-radius:60% 60% 60% 0;
}
.bow::before{ left:-20px; transform:rotate(-18deg); border-radius:60% 60% 0 60%; }
.bow::after{ left:0px; transform:rotate(18deg); }

/* =========================================================
   READER OVERLAY (the opened letter)
   ========================================================= */
.reader{
  position:fixed; inset:0; z-index:50;
  display:none; align-items:center; justify-content:center;
  padding:1.5rem;
}
.reader.open{ display:flex; }
.reader-bg{
  position:absolute; inset:0;
  background:rgba(60,44,30,.55);
  backdrop-filter:blur(2px);
  animation:fade .4s ease both;
}
.letter{
  position:relative; z-index:2;
  width:min(560px, 94vw);
  max-height:88vh; overflow:auto;
  text-align:center;
  padding:3rem 2.6rem 2.4rem;
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(189,154,82,.07) 27px 28px),
    linear-gradient(180deg, #f8efe0 0%, #efe1c9 100%);
  border:1px solid var(--paper-edge);
  border-radius:4px;
  box-shadow:0 30px 70px -20px rgba(40,28,18,.7), 0 0 0 10px rgba(248,239,224,.5);
  animation:unfold .55s cubic-bezier(.2,.9,.25,1) both;
}
.letter-cat{
  font-style:italic; color:var(--gold-deep);
  letter-spacing:.06rem; font-size:1rem; margin:0 0 .4rem;
}
.letter-title{
  font-family:'Parisienne', cursive;
  font-weight:400; font-size:2.4rem; line-height:1.05;
  color:var(--rose-deep); margin:0 0 .4rem;
}
.letter-rule{ color:var(--gold); font-size:1.3rem; margin:.2rem 0 1.1rem; }
.letter-body{
  font-size:1.4rem; line-height:1.6; color:var(--ink);
  text-align:left; white-space:pre-line; margin:0 0 1.6rem;
}
.letter-sign{
  font-style:italic; color:var(--ink-soft); font-size:1.15rem; margin:0 0 1.6rem;
}
.letter-sign span{ font-family:'Parisienne', cursive; font-size:1.6rem; color:var(--rose-deep); }
.btn-seal{
  font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.1rem;
  color:var(--rose-deep); cursor:pointer;
  background:rgba(255,255,255,.4);
  border:1px solid var(--gold);
  padding:.5rem 1.4rem; border-radius:30px;
  transition:background .2s, transform .2s;
}
.btn-seal:hover{ background:rgba(255,255,255,.75); transform:translateY(-2px); }

/* =========================================================
   FOOTER + ghost button
   ========================================================= */
.page-foot{ text-align:center; margin-top:3rem; }
.btn-ghost{
  font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.1rem;
  color:var(--ink-soft); cursor:pointer;
  background:none; border:1px solid var(--paper-edge);
  padding:.5rem 1.4rem; border-radius:30px;
  transition:color .2s, border-color .2s;
}
.btn-ghost:hover{ color:var(--rose-deep); border-color:var(--rose); }

/* =========================================================
   PETALS
   ========================================================= */
.petals{ position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.petal{
  position:absolute; top:-30px;
  width:14px; height:14px;
  background:radial-gradient(circle at 30% 30%, var(--rose-pale), var(--rose));
  border-radius:50% 0 50% 50%;
  opacity:.5;
  animation:fall linear infinite;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */
@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes unfold{ from{ opacity:0; transform:translateY(20px) scale(.94); } to{ opacity:1; transform:none; } }
@keyframes fall{
  0%   { transform:translateY(-30px) translateX(0) rotate(0deg); }
  50%  { transform:translateY(50vh) translateX(40px) rotate(180deg); }
  100% { transform:translateY(105vh) translateX(-30px) rotate(360deg); opacity:0; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:520px){
  .login-title{ font-size:4rem; }
  .page-title{ font-size:3.4rem; }
  .item-grid{ gap:1.8rem 1.2rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}