/* ═══════════════════════════════════════════════════════════════════════
   La Michoacana Prime — coming soon
   Palette sampled directly from the logo artwork.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --obsidian:   #070605;   /* the field the logo already lives on */
  --ash:        #17120E;   /* raised surface, hairlines */
  --gold:       #C6A069;
  --gold-lit:   #EFBA53;
  --cream:      #F0E9DA;

  /* the gilt: a struck-metal ramp, not a flat yellow */
  --gilt: linear-gradient(168deg,
            #6E5636  0%,
            #E2C691 18%,
            #F6E6BC 31%,
            #EFBA53 48%,
            #B98F52 63%,
            #F4E2B4 79%,
            #7A5F39 100%);

  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --text:    "Archivo", "Helvetica Neue", system-ui, sans-serif;

  --gut:  clamp(1.25rem, 5vw, 4.5rem);
  --rule: 1px solid rgba(198,160,105,.22);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--obsidian);
  color:var(--cream);
  font-family:var(--text);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ display:block; max-width:100%; }
ul{ margin:0; padding:0; list-style:none; }

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

:focus-visible{
  outline:2px solid var(--gold-lit);
  outline-offset:3px;
}

/* ═══ ACT ONE · THE WINDOW ══════════════════════════════════════════════
   You are outside, looking in. The case glows at the edges; the centre
   is frosted so the gilt lettering can be read off the glass.
   ═══════════════════════════════════════════════════════════════════════ */

.window{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
}

/* --- the case behind the glass --- */
.case{
  position:absolute; inset:0; z-index:0;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-template-rows:1fr;
  gap:2px;
  background:var(--ash);
}
.case .bay{ position:relative; overflow:hidden; }
.case .bay > img,
.case .bay > video{
  width:100%; height:100%;
  object-fit:cover;
  /* the case is lit; the glass does the dimming, not the lamp */
  filter:saturate(1.02) brightness(.84) contrast(1.03);
  transform:scale(1.04);
}

/* --- the pane ---
   The frost is a tall, narrow plate down the middle: the lettering gets
   near-black to sit on, and the outer bays keep their colour. Widening the
   radial past ~62% starts to swallow the glow that makes this a window. */
.glass{
  position:absolute; inset:0; z-index:1;
  backdrop-filter:blur(8px) saturate(.85) brightness(.6);
  -webkit-backdrop-filter:blur(8px) saturate(.85) brightness(.6);
  -webkit-mask-image:radial-gradient(66% 106% at 50% 47%,
      #000 0%, #000 44%, rgba(0,0,0,.5) 74%, transparent 100%);
          mask-image:radial-gradient(66% 106% at 50% 47%,
      #000 0%, #000 44%, rgba(0,0,0,.5) 74%, transparent 100%);
}
.glass::after{
  /* fallback scrim + the vignette that reads as the frame of the window */
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(57% 104% at 50% 47%,
      rgba(7,6,5,.96) 0%, rgba(7,6,5,.93) 38%,
      rgba(7,6,5,.68) 72%, rgba(7,6,5,.26) 100%),
    linear-gradient(to bottom,
      rgba(7,6,5,.84) 0%, rgba(7,6,5,.08) 22%,
      rgba(7,6,5,.08) 64%, rgba(7,6,5,.94) 100%);
}

/* --- the etching --- */
.etching{
  position:relative; z-index:2;
  width:min(100% - (var(--gut) * 2), 86rem);
  text-align:center;
  padding-block:clamp(4rem,12vh,7rem);
}

.etching__mark{
  width:clamp(15rem, 42vw, 30rem);
  height:auto;
  margin-inline:auto;
  filter:drop-shadow(0 2px 26px rgba(0,0,0,.85));
}
/* the lockup links to the Google listing — no visible affordance, the gilt
   already carries the eye; just a pointer and a touch of lift on hover */
.etching__marklink{
  display:block;
  text-decoration:none;
  transition:opacity .4s ease;
}
.etching__marklink:hover{ opacity:.88; }

.etching__rule{
  margin:clamp(1.5rem,4vh,2.6rem) auto clamp(1.1rem,3vh,1.8rem);
  height:1px;
  width:min(78%, 30rem);
  background:linear-gradient(to right,
    transparent, rgba(198,160,105,.55) 22%,
    var(--gold-lit) 50%, rgba(198,160,105,.55) 78%, transparent);
  position:relative;
}
.etching__rule span{
  position:absolute; left:50%; top:50%;
  width:5px; height:5px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--gold-lit);
}

.etching__word{
  font-family:var(--display);
  font-weight:500;
  /* PRÓXIMAMENTE is twelve capitals wide — sized to span the pane without
     ever reaching its edge. Changing the word means re-checking this. */
  font-size:clamp(1.85rem, 8.4vw, 7.4rem);
  line-height:.98;
  letter-spacing:.03em;
  text-transform:uppercase;
  margin:0;

  background:var(--gilt);
  background-size:100% 260%;
  background-position:0 42%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;

  /* the outer letters overhang the frosted plate onto lit product;
     drop-shadow follows the clipped glyphs, so it separates them there
     without dimming the bays the way a wider vignette would */
  filter:drop-shadow(0 0 26px rgba(7,6,5,.95)) drop-shadow(0 2px 5px rgba(7,6,5,.8));
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .etching__word{ color:var(--gold); background:none; }
}

.etching__gloss{
  margin:clamp(.85rem,2vh,1.3rem) 0 0;
  font-size:clamp(.62rem,1.7vw,.78rem);
  font-weight:400;
  letter-spacing:.52em;
  text-indent:.52em;          /* balance the trailing tracking */
  text-transform:uppercase;
  color:rgba(240,233,218,.62);
}

.etching__cue{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:.75rem;
  margin-top:clamp(2.2rem,6vh,3.4rem);
  color:var(--gold);
  text-decoration:none;
  font-size:.62rem;
  font-weight:400;
  letter-spacing:.34em;
  text-indent:.34em;
  text-transform:uppercase;
  transition:color .35s ease;
}
.etching__cue:hover{ color:var(--gold-lit); }
.etching__cue svg{ animation:drift 2.8s ease-in-out infinite; }

@keyframes drift{
  0%,100%{ transform:translateY(0);   opacity:.55; }
  50%    { transform:translateY(5px); opacity:1;   }
}


/* ═══ THE FLAVOUR WALL ══════════════════════════════════════════════════
   Every paletería has one: the list of what's in the case, written on the
   wall. Here it is the rule between the two acts — the divider IS the menu.
   ═══════════════════════════════════════════════════════════════════════ */

.wall{
  position:relative;
  overflow:hidden;
  padding-block:clamp(1.1rem,2.6vw,1.6rem);
  border-block:var(--rule);
  background:linear-gradient(to bottom, #0B0908, var(--obsidian));
}
.wall::before,
.wall::after{
  content:""; position:absolute; top:0; bottom:0; width:clamp(3rem,10vw,9rem);
  z-index:2; pointer-events:none;
}
.wall::before{ left:0;  background:linear-gradient(to right, var(--obsidian), transparent); }
.wall::after { right:0; background:linear-gradient(to left,  var(--obsidian), transparent); }

.wall__track{
  display:flex;
  width:max-content;
  animation:wall 68s linear infinite;
}
.wall__set{
  display:flex;
  align-items:center;
  flex:none;
}
.wall__set li{
  font-family:var(--display);
  font-size:clamp(.72rem,1.5vw,.94rem);
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  padding-inline:clamp(1.1rem,2.6vw,2.1rem);
  white-space:nowrap;
  border-left:1px solid rgba(198,160,105,.22);
}

@keyframes wall{ to{ transform:translateX(-50%); } }


/* ═══ SHARED BLOCK RHYTHM ═══════════════════════════════════════════════ */

.block{
  padding-block:clamp(4.5rem,11vw,8.5rem);
}
.block__head{
  width:min(100% - (var(--gut) * 2), 72rem);
  margin-inline:auto;
  text-align:center;
}
.block__title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.55rem,4vw,2.5rem);
  letter-spacing:.03em;
  line-height:1.2;
  margin:.7rem 0 0;
  color:var(--cream);
}

.eyebrow{
  margin:0;
  font-size:.6rem;
  font-weight:500;
  letter-spacing:.42em;
  text-indent:.42em;
  text-transform:uppercase;
  color:var(--gold);
}


/* ═══ ACT TWO · THE COUNTER ═════════════════════════════════════════════
   Now you're inside. Same product, crisp and named.
   ═══════════════════════════════════════════════════════════════════════ */

.shelf{ margin-top:clamp(2.5rem,6vw,4rem); }

/* Two across on a phone, three on a desktop — the whole counter is visible
   either way. Nothing here hides behind a swipe. */
.shelf__row{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(1.4rem,4vw,2.4rem) clamp(.8rem,3vw,1.4rem);
  width:min(100% - (var(--gut) * 2), 70rem);
  margin-inline:auto;
}
.item__frame{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  border:1px solid rgba(198,160,105,.26);
  background:var(--ash);
}
.item__frame > img,
.item__frame > video{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.item:hover .item__frame > img,
.item:hover .item__frame > video{ transform:scale(1.05); }

.item__frame::after{
  /* a thin gilt lip along the top of each bay, like the case trim */
  content:"";
  position:absolute; inset:0 0 auto;
  height:1px;
  background:linear-gradient(to right, transparent, var(--gold-lit), transparent);
  opacity:.5;
}

/* An empty bay closing the counter: the case keeps going. Spans the whole
   row so the grid stays even at two columns and at three. */
.item--more{
  grid-column:1 / -1;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-height:clamp(7rem,13vw,9.5rem);
  margin-top:clamp(.2rem,1vw,.8rem);
  border:1px solid rgba(198,160,105,.26);
  background:radial-gradient(120% 160% at 50% 0%, rgba(198,160,105,.07), transparent 70%);
}
.item--more::after{
  content:"";
  position:absolute; inset:0 0 auto;
  height:1px;
  background:linear-gradient(to right, transparent, var(--gold-lit), transparent);
  opacity:.5;
}

.more__es{
  margin:0;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.3rem,3.2vw,2rem);
  letter-spacing:.12em;
  text-indent:.12em;
  text-transform:uppercase;

  background:var(--gilt);
  background-size:100% 240%;
  background-position:0 40%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .more__es{ color:var(--gold); background:none; }
}

.more__en{
  margin:0;
  font-size:.62rem;
  letter-spacing:.4em;
  text-indent:.4em;
  text-transform:uppercase;
  color:rgba(240,233,218,.42);
}

.item__name{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1rem,2.1vw,1.28rem);
  letter-spacing:.06em;
  text-transform:uppercase;
  margin:1.15rem 0 0;
}



/* ═══ FOOT ══════════════════════════════════════════════════════════════ */

.foot{
  border-top:var(--rule);
  padding:clamp(2.8rem,7vw,4.5rem) var(--gut);
  text-align:center;
}
.foot__mark{
  width:34px; height:34px;
  margin-inline:auto;
  opacity:.75;
}
.foot__name{
  font-family:var(--display);
  font-size:.76rem;
  letter-spacing:.3em;
  text-indent:.3em;
  text-transform:uppercase;
  color:var(--gold);
  margin:1rem 0 0;
}
/* the name links to the Google listing; keep it quiet until hovered so the
   footer doesn't gain a second underlined element competing with the handle */
.foot__name a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:color .3s ease, border-color .3s ease;
}
.foot__name a:hover{ color:var(--gold-lit); border-color:rgba(198,160,105,.45); }
.foot__meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem 1.6rem;
  margin:1.3rem 0 0;
  font-size:.85rem;
}
.foot__meta:empty{ display:none; }
.foot__meta a{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  color:rgba(240,233,218,.72);
  text-decoration:none;
  transition:color .3s ease;
}
/* the rule sits under the label only — carrying it under the icon too would
   strike through the glyph's lower edge */
.foot__meta a > span{
  color:inherit;
  border-bottom:1px solid rgba(198,160,105,.35);
  padding-bottom:1px;
  transition:border-color .3s ease;
}
.foot__meta a:hover{ color:var(--gold-lit); }
.foot__meta a:hover > span{ border-color:var(--gold-lit); }

.foot__meta svg{
  width:1.05em;
  height:1.05em;
  flex:none;
  overflow:visible;
}

/* plain text rows (address), not the label inside a link */
.foot__meta li > span{ color:rgba(240,233,218,.55); }

.foot__legal{
  margin:1.8rem 0 0;
  font-size:.68rem;
  letter-spacing:.1em;
  color:rgba(240,233,218,.28);
}

.foot__by{
  margin:.55rem 0 0;
  font-size:.68rem;
  letter-spacing:.1em;
  color:rgba(240,233,218,.28);
}
.foot__by a{
  color:rgba(240,233,218,.5);
  text-decoration:none;
  border-bottom:1px solid rgba(198,160,105,.3);
  padding-bottom:1px;
  transition:color .3s ease, border-color .3s ease;
}
.foot__by a:hover{ color:var(--gold-lit); border-color:var(--gold-lit); }


/* ═══ THE LOAD ══════════════════════════════════════════════════════════
   One orchestrated moment: the pane clears, the etching resolves, and a
   single sweep of light crosses the gilt — the way it does on real gilding
   when you walk past a shop window.
   ═══════════════════════════════════════════════════════════════════════ */

.js .etching__mark,
.js .etching__rule,
.js .etching__word,
.js .etching__gloss,
.js .etching__cue{
  opacity:0;
  transform:translateY(14px);
}
.js .etching__rule{ transform:scaleX(.2); }

.lit .etching__mark,
.lit .etching__rule,
.lit .etching__word,
.lit .etching__gloss,
.lit .etching__cue{
  opacity:1;
  transform:none;
  transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.lit .etching__mark  { transition-delay:.15s; }
.lit .etching__rule  { transition-delay:.60s; transition-duration:1.3s; }
.lit .etching__word  { transition-delay:.78s; }
.lit .etching__gloss { transition-delay:.98s; }
.lit .etching__cue   { transition-delay:1.16s; }

.lit .etching__word{ animation:sheen 2.1s cubic-bezier(.35,0,.2,1) .85s 1 both; }
@keyframes sheen{
  from{ background-position:0 -160%; }
  to  { background-position:0 42%;  }
}

.js .case .bay > img,
.js .case .bay > video{
  opacity:0;
  transition:opacity 1.6s ease;
}
.lit .case .bay > img,
.lit .case .bay > video{ opacity:1; }


/* ═══ RESPONSIVE ════════════════════════════════════════════════════════ */

@media (min-width:900px){
  .shelf__row{ grid-template-columns:repeat(3,1fr); }
}

/* The case reflows from one long row of bays into a mosaic, so all six
   stay on screen. Rows are explicit — otherwise the last row stretches. */
@media (max-width:1100px){
  .case{
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(2,1fr);
  }
}

@media (max-width:700px){
  .case{
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:repeat(3,1fr);
  }
  .etching__gloss{ letter-spacing:.36em; text-indent:.36em; }

  /* On a portrait screen the desktop ellipse stretches into a vertical bar.
     An explicit circle keeps the frost reading as a lens on the glass, with
     the mosaic showing at all four corners. Sized off vw so it stays round. */
  .etching__mark{ width:min(56vw, 13rem); }

  .glass{
    -webkit-mask-image:radial-gradient(circle 62vw at 50% 48%,
        #000 0%, #000 62%, rgba(0,0,0,.55) 84%, transparent 100%);
            mask-image:radial-gradient(circle 62vw at 50% 48%,
        #000 0%, #000 62%, rgba(0,0,0,.55) 84%, transparent 100%);
  }
  .glass::after{
    background:
      radial-gradient(circle 60vw at 50% 48%,
        rgba(7,6,5,.97) 0%, rgba(7,6,5,.95) 58%,
        rgba(7,6,5,.74) 82%, rgba(7,6,5,.18) 100%),
      linear-gradient(to bottom,
        rgba(7,6,5,.62) 0%, rgba(7,6,5,.03) 20%,
        rgba(7,6,5,.03) 76%, rgba(7,6,5,.86) 100%);
  }
}

@media (max-width:420px){
  .etching__word{ letter-spacing:.02em; }
}


/* ═══ REDUCED MOTION ════════════════════════════════════════════════════ */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }

  .wall__track{ animation:none; }
  .etching__cue svg{ animation:none; }
  .lit .etching__word{ animation:none; }

  .js .etching__mark,
  .js .etching__rule,
  .js .etching__word,
  .js .etching__gloss,
  .js .etching__cue,
  .js .case .bay > img,
  .js .case .bay > video{
    opacity:1;
    transform:none;
    transition:none;
  }

  .item__frame > img,
  .item__frame > video,
  .item:hover .item__frame > img,
  .item:hover .item__frame > video{
    transition:none;
    transform:none;
  }
}