/* =============================================================================
 * JAPOMUNDI — Coming soon. Sala en penumbra con shoji que se abre al scroll.
 *
 * La escena entera es `position: fixed`: la pantalla nunca baja. El scroll de
 * la página solo alimenta la variable --p (0 = cerrado, 1 = abierto de par en
 * par), que escribe js/scene.js sobre :root.
 * ========================================================================== */

/* --- Fuentes autoalojadas (cero peticiones externas) --------------------- */
@font-face { font-family:'Lora'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../assets/fonts/lora-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Lora'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../assets/fonts/lora-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root{
  /* Escritas por JS en cada frame */
  --p: 0;        /* apertura suavizada 0..1 */
  --seam: 0;     /* destello de la rendija, pico al despegar */
  --rev: 0;      /* aparición del contenido 0..1 */

  --ink:#f4ece0;
  --ink-soft:#e2d5c2;
  --red:#ae192f;
  --red-dark:#8f1426;
  --room:#100b07;

  --font-display:'Lora', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;

  /* Carpintería de la sala */
  --frame-x: clamp(10px, 3vw, 56px);
  --frame-top: clamp(14px, 5vh, 78px);
  --floor-h: clamp(72px, 15vh, 180px);

  /* Recorrido de cada hoja: 94% deja el canto asomando junto a la jamba */
  --travel: 94%;

  /* Por dónde entra la luz, en % del ancho de la sala. Con dos hojas el hueco
     se abre por el centro; en móvil, con una sola hoja, el hueco crece desde
     el canto derecho y su centro se desplaza (ver el bloque de móvil).
     De aquí cuelgan la mancha de luz del tatami y la sombra del bonsái. */
  --lightx: 50%;

  /* Celdas del kumiko por hoja (más altas que anchas, como la puerta real) */
  --cols: 6;
  --rows: 4;
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scrollbar-width:none; }
html::-webkit-scrollbar{ display:none; }

/* El documento no se desplaza NUNCA: la escena es todo lo que hay.
   El gesto de scroll lo captura js/scene.js y solo mueve las hojas. */
html, body{ height:100%; overflow:hidden; }
body{
  margin:0;
  position:fixed; inset:0;
  background:var(--room);
  color:var(--ink);
  font-family:var(--font-body);
  overscroll-behavior:none;
  touch-action:none;              /* el dedo abre la puerta, no arrastra la página */
}

/* =========================================================================
 * ESCENA
 * ====================================================================== */
.scene{
  position:fixed; inset:0;
  overflow:hidden;
  background:#0b0805;
  z-index:0;
}

/* Vano de la puerta: recorta las hojas, que se meten tras las jambas. */
.doorway{
  position:absolute;
  top:var(--frame-top); left:var(--frame-x); right:var(--frame-x); bottom:var(--floor-h);
  overflow:hidden;
  background:#0a0703;
}

/* --- Jardín (lo que hay detrás) ----------------------------------------- */
.garden{
  position:absolute; inset:0;
  background:url('../assets/jardin.jpg') center 42% / cover no-repeat;
  /* respira hacia atrás según se abre: da profundidad sin marear */
  transform:scale(calc(1.14 - 0.14 * var(--p)));
  transform-origin:50% 45%;
  will-change:transform;
}
/* Un punto de penumbra al principio, solo el que justifica que la vista se
   acostumbre: por un hueco abierto el jardín se ve a plena luz, más claro que
   el papel, así que aquí no cabe oscurecerlo de verdad. */
.garden__dim{
  position:absolute; inset:0;
  background:#160e05;
  opacity:calc(0.24 - 0.24 * var(--p));
}
/* Y al abrirse entra el oro. */
.garden__bloom{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 85% at 50% 38%, rgba(255,196,110,.34), rgba(255,150,60,.10) 45%, transparent 72%);
  mix-blend-mode:screen;
  opacity:var(--p);
}

/* Polvo en suspensión dentro del haz de luz */
.motes{ position:absolute; inset:0; opacity:calc(var(--p) * .85); }
.motes i{
  position:absolute; display:block;
  width:3px; height:3px; border-radius:50%;
  background:rgba(255,232,196,.85);
  box-shadow:0 0 8px 2px rgba(255,214,150,.55);
  animation:float linear infinite;
}
@keyframes float{
  0%   { transform:translate3d(0,10px,0) scale(.7); opacity:0; }
  15%  { opacity:.9; }
  85%  { opacity:.5; }
  100% { transform:translate3d(18px,-70px,0) scale(1.15); opacity:0; }
}

/* Rendija de luz entre las dos hojas, justo al despegar */
.seam{
  position:absolute; top:0; bottom:0; left:50%;
  width:26px; margin-left:-13px;
  background:linear-gradient(90deg, transparent, rgba(255,226,170,.95), transparent);
  filter:blur(6px);
  opacity:var(--seam);
}

/* --- Hojas del shoji -----------------------------------------------------
 * El papel NO lleva las sombras pintadas: es una translucidez de verdad.
 * Cada hoja lleva dentro una copia difuminada del MISMO jardín que hay detrás,
 * contra-desplazada y con la misma escala, así que se queda quieta en pantalla
 * mientras la hoja se desliza. La silueta del pino y del farol están fuera, en
 * el jardín, no dibujadas en la puerta.
 * ------------------------------------------------------------------------ */
.panel{
  position:absolute; top:0; bottom:0; width:50.2%;
  overflow:hidden;
  will-change:transform;
}
.panel--l{
  left:0;
  transform:translate3d(calc(var(--p) * var(--travel) * -1), 0, 0);
}
.panel--r{
  right:0;
  transform:translate3d(calc(var(--p) * var(--travel)), 0, 0);
}

/* Anula el movimiento de la hoja: los porcentajes van sobre el ancho de hoja,
   igual que --travel, así que se cancelan exactamente. */
.panel__win{ position:absolute; inset:0; }
.panel--l .panel__win{ transform:translate3d(calc(var(--p) * var(--travel)), 0, 0); }
.panel--r .panel__win{ transform:translate3d(calc(var(--p) * var(--travel) * -1), 0, 0); }

/* Ancho del vano completo y mismo encuadre y escala que .garden. */
.panel__glass{
  position:absolute; top:0; bottom:0; width:199.2%;
  background:url('../assets/jardin-difuso.jpg') center 42% / cover no-repeat;
  transform:scale(calc(1.14 - 0.14 * var(--p)));
  transform-origin:50% 45%;
  opacity:.95;
}
.panel--l .panel__glass{ left:0; }
.panel--r .panel__glass{ right:0; }

/* El papel: velo cálido translúcido + fibra de washi. */
.panel__paper{
  position:absolute; inset:0;
  background:
    url('../assets/washi.png') repeat 0 0 / 160px 160px,
    radial-gradient(120% 85% at 50% 38%, rgba(255,206,130,.22), transparent 72%),
    linear-gradient(180deg, rgba(255,224,166,.26), rgba(252,200,138,.30)),
    linear-gradient(180deg, rgba(252,238,210,.18), rgba(246,226,190,.24));
}
/* Al abrirse entra más luz rasante y el papel se enciende un poco. */
.panel__paper::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,226,178,.5), rgba(255,196,120,.12));
  opacity:calc(var(--p) * .22);
}

/* Carpintería de la hoja, copiada de la puerta de referencia:
 *   · kumiko fino, con celdas más altas que anchas
 *   · marco de hoja bastante más grueso que el kumiko
 *   · parteluz central con brillo (las dos hojas se encuentran ahí)
 *   · hikite: el tirador embutido, una ranura vertical en el parteluz
 * ------------------------------------------------------------------------ */
.panel{
  --f:  clamp(7px, .95vw, 18px);       /* marco de la hoja */
  --st: calc(var(--f) * 1.55);         /* parteluz del encuentro */
  --bar:clamp(3px, .42vw, 7px);        /* listón del kumiko */
}

.panel__grid{
  position:absolute; inset:var(--f);
  background-image:
    linear-gradient(90deg, #33200f 0 var(--bar), rgba(46,26,12,.34) var(--bar) calc(var(--bar) + 5px), transparent calc(var(--bar) + 5px)),
    linear-gradient(180deg, #33200f 0 var(--bar), rgba(46,26,12,.34) var(--bar) calc(var(--bar) + 5px), transparent calc(var(--bar) + 5px));
  background-size:calc(100% / var(--cols)) calc(100% / var(--rows));
}

.panel__frame{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,#5b3a20,#2a1a0e) top    / 100% var(--f) no-repeat,
    linear-gradient(0deg,  #4a2e19,#190f06) bottom / 100% var(--f) no-repeat,
    linear-gradient(90deg, #4e3119,#190f06) left / var(--f) 100% no-repeat,
    linear-gradient(270deg,#4e3119,#190f06) right/ var(--f) 100% no-repeat;
  box-shadow:inset 0 0 26px rgba(24,12,4,.42);   /* el marco sombrea el papel */
}

/* Parteluz: solo en el canto por el que se encuentran las dos hojas. */
.panel__frame::before{
  content:''; position:absolute; top:0; bottom:0; width:var(--st);
  background:linear-gradient(90deg,#1b1007 0%,#5c3a1f 26%,#7a5230 48%,#42280f 74%,#150c04 100%);
  box-shadow:0 0 16px rgba(0,0,0,.55);
}
.panel--l .panel__frame::before{ right:0; }
.panel--r .panel__frame::before{ left:0; }

/* Hikite: la ranura embutida donde se mete el dedo para correr la hoja. */
.panel__frame::after{
  content:''; position:absolute; top:51%;
  width:calc(var(--st) * .34); height:clamp(32px, 7.5%, 108px);
  border-radius:2px;
  background:linear-gradient(90deg,#0a0603,#2a1a0c 55%,#100904);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.9), 0 1px 0 rgba(255,214,160,.18);
}
.panel--l .panel__frame::after{ right:calc(var(--st) * .33); }
.panel--r .panel__frame::after{ left:calc(var(--st) * .33); }

/* --- Carpintería: jambas, dintel, suelo ---------------------------------- */
.jamb, .lintel{
  position:absolute;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.026) 0 2px, transparent 2px 7px),
    linear-gradient(90deg,#0d0805,#2c1c11 42%,#1a1009);
}
.jamb{ top:0; bottom:0; width:var(--frame-x); }
.jamb--l{ left:0; box-shadow:inset -6px 0 14px rgba(0,0,0,.75), 8px 0 26px rgba(0,0,0,.5); }
.jamb--r{ right:0; box-shadow:inset 6px 0 14px rgba(0,0,0,.75), -8px 0 26px rgba(0,0,0,.5); }
.lintel{
  top:0; left:0; right:0; height:var(--frame-top);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 3px, transparent 3px 9px),
    linear-gradient(180deg,#0a0603,#2b1b10 65%,#150d07);
  box-shadow:0 10px 30px rgba(0,0,0,.6);
}

.floor{
  position:absolute; left:0; right:0; bottom:0; height:var(--floor-h);
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.16) 0 1px, transparent 1px 5px),
    linear-gradient(180deg,#3a2b1a,#20160d 55%,#0d0805);
  box-shadow:inset 0 14px 26px rgba(0,0,0,.6);
  overflow:hidden;
}
/* Umbral de madera (shikii) */
.floor__sill{
  position:absolute; top:0; left:0; right:0; height:clamp(6px,1.3vh,14px);
  background:linear-gradient(180deg,#5a3d23,#2b1c10);
  box-shadow:0 3px 10px rgba(0,0,0,.6);
}
/* La luz sobre el tatami ocupa EXACTAMENTE el hueco que ha dejado la puerta:
   con dos hojas se abre desde el centro hacia los lados; con una sola, el
   límite entre sombra y luz barre el suelo de derecha a izquierda. */
.floor__light{
  position:absolute; top:0; bottom:0;
  left:calc(50% - var(--p) * 50%);
  right:calc(50% - var(--p) * 50%);
  background:linear-gradient(180deg, rgba(255,203,128,.55), rgba(255,170,80,.05) 78%, transparent);
  clip-path:polygon(8% 0, 92% 0, 100% 100%, 0% 100%);
  filter:blur(10px);
  opacity:calc(var(--p) * .95);
}

/* =========================================================================
 * EL BONSÁI — dentro de la habitación, apoyado en el tatami
 * Con la puerta cerrada es casi una silueta contra el papel; según se abre,
 * la luz del jardín le entra de lleno y su sombra se alarga por el suelo.
 * ====================================================================== */
.bonsai{
  position:absolute; z-index:2;
  left:clamp(8px, 4vw, 84px);
  bottom:calc(var(--floor-h) * .40);
  pointer-events:none;
}
.bonsai img{
  display:block;
  height:clamp(118px, 30vh, 310px); width:auto;
  /* Con su color: verde de pino y maceta de barro. Solo un punto de luz
     ambiente de menos con la puerta cerrada, y el halo cálido al abrirse. */
  filter:
    saturate(1.02)
    brightness(calc(.88 + .14 * var(--p)))
    drop-shadow(0 0 calc(5px + 12px * var(--p)) rgba(255,190,112,calc(.10 + .30 * var(--p))))
    drop-shadow(0 10px 18px rgba(0,0,0,.5));
}
/* Un apoyo de sombra en la base para que no flote, nada más. */
.bonsai__shade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 58%, rgba(30,16,5,.18) 84%, rgba(24,12,4,.30));
  -webkit-mask:url('../assets/bonsai.png') center / contain no-repeat;
          mask:url('../assets/bonsai.png') center / contain no-repeat;
}

/* Sombra proyectada en el suelo: crece con la luz que entra. */
.bonsai__shadow{
  position:absolute; right:6%; bottom:-6%;
  width:calc(85% + 75% * var(--p)); height:22%;
  background:radial-gradient(closest-side, rgba(18,9,3,.72), transparent 76%);
  transform:skewX(-15deg);
  transform-origin:100% 100%;
  opacity:calc(.28 + .5 * var(--p));
  filter:blur(7px);
}

.vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(130% 110% at 50% 45%, transparent 42%, rgba(0,0,0,.55) 100%);
}

/* =========================================================================
 * MARCA / INVITACIÓN
 * ====================================================================== */
.brand{
  position:fixed; z-index:3;
  top:max(18px, env(safe-area-inset-top)); left:0; right:0;
  display:flex; justify-content:center;
  pointer-events:none;
}
.brand img{
  width:clamp(112px, 15vw, 172px); height:auto;
  opacity:calc(.92 - .82 * var(--rev));
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.75));
  transition:opacity .2s linear;
}

.hint{
  position:fixed; z-index:3;
  left:0; right:0; bottom:calc(var(--floor-h) * .34);
  margin:0; text-align:center;
  opacity:calc(1 - var(--p) * 5);       /* se va en cuanto empieza a abrirse */
  cursor:pointer;
}
body.is-moving .hint{ pointer-events:none; }
.hint__txt{
  display:block;
  font-size:12px; letter-spacing:.19em; text-transform:uppercase;
  color:rgba(244,236,224,.72);
  text-shadow:0 2px 10px rgba(0,0,0,.8);
}
.hint__rail{
  display:block; width:1px; height:44px; margin:12px auto 0;
  background:linear-gradient(180deg, rgba(244,236,224,.45), transparent);
  position:relative; overflow:hidden;
}
.hint__dot{
  position:absolute; left:-1px; width:3px; height:3px; border-radius:50%;
  background:rgba(255,226,180,.95);
  animation:drop 2.4s cubic-bezier(.5,0,.3,1) infinite;
}
@keyframes drop{
  0%{ transform:translateY(-6px); opacity:0; }
  25%{ opacity:1; }
  100%{ transform:translateY(44px); opacity:0; }
}

/* =========================================================================
 * CONTENIDO (aparece con la puerta ya abierta)
 * ====================================================================== */
/* Ocupa la pantalla entera, no solo el vano: sin scroll interno, el texto
   necesita todo el alto disponible para caber siempre. */
.reveal{
  position:fixed; z-index:4; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(12px, 3vh, 30px) clamp(16px, 5vw, 40px);
  overflow:hidden;                     /* el texto no se mueve: no hay scroll aquí */
  opacity:var(--rev);
  pointer-events:none;                 /* se activa con .is-open */
}
body.is-open .reveal{ pointer-events:auto; }

.reveal__scrim{
  position:absolute; inset:-10%;
  background:radial-gradient(60% 54% at 50% 52%, rgba(18,11,6,.74), rgba(18,11,6,.48) 46%, transparent 78%);
  pointer-events:none;
}
.reveal__in{
  position:relative;
  width:min(520px, 100%);
  text-align:center;
  transform:translateY(calc((1 - var(--rev)) * 22px));
}

.eyebrow{
  margin:0 0 12px;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,214,160,.9);
}
h1{
  margin:0 0 14px;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(28px, 6.4vw, 46px); line-height:1.14; letter-spacing:-.01em;
  text-shadow:0 3px 22px rgba(0,0,0,.72);
}
.lede{
  margin:0 auto 26px; max-width:44ch;
  font-size:clamp(14px, 3.4vw, 16px); line-height:1.62;
  color:var(--ink-soft);
  text-shadow:0 2px 14px rgba(0,0,0,.7);
}

.form{ display:grid; gap:10px; text-align:left; }

/* Nombre y apellido comparten fila; en pantallas muy estrechas se apilan. */
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:340px){
  .form .row{ grid-template-columns:1fr; }
}
.field input{
  width:100%; padding:13px 15px;
  font:inherit; font-size:16px;          /* 16px: evita el zoom de iOS */
  color:var(--ink);
  background:rgba(20,13,8,.52);
  border:1px solid rgba(244,236,224,.26);
  border-radius:8px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.field input::placeholder{ color:rgba(244,236,224,.60); }
.field input:focus{
  outline:none;
  border-color:rgba(255,206,150,.75);
  background:rgba(24,15,9,.66);
  box-shadow:0 0 0 3px rgba(255,186,110,.16);
}
.field input[aria-invalid="true"]{ border-color:#e3607a; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.btn{
  margin-top:6px; padding:14px 18px;
  font:inherit; font-weight:700; font-size:15px; letter-spacing:.01em;
  color:#fff7f0; background:var(--red);
  border:0; border-radius:8px; cursor:pointer;
  box-shadow:0 10px 26px rgba(120,10,26,.42);
  transition:background .18s ease, transform .12s ease, box-shadow .18s ease;
}
.btn:hover{ background:var(--red-dark); }
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ opacity:.6; cursor:default; }

.msg{ margin:2px 0 0; min-height:18px; font-size:13px; color:#ffc9b8; }
.msg.ok{ color:#bfe0b0; }

/* Estado "gracias" */
.done{ text-align:center; }
.done h2{
  margin:0 0 10px; font-family:var(--font-display); font-weight:700;
  font-size:clamp(22px,5vw,32px);
}
.done p{ margin:0; color:var(--ink-soft); font-size:15px; line-height:1.6; }

/* =========================================================================
 * ESTADOS
 * ====================================================================== */
body.is-loading .scene{ opacity:0; }
.scene{ transition:opacity .9s ease; }

/* Sin scroll interno, en móvil el contenido tiene que caber sí o sí. */
@media (min-width:1600px){ :root{ --cols:9; --rows:5; } }

@media (max-width:620px){
  /* En móvil el vano es estrecho y alto: dos hojas dejarían dos rendijas
     mezquinas. Va una sola hoja, que corre entera hacia la izquierda. */
  :root{ --travel:100%; --floor-h:clamp(56px, 11vh, 120px); --cols:4; --rows:5; }
  .panel--r{ display:none; }
  .panel--l{ width:100%; }
  .panel--l .panel__glass{ width:100%; }
  /* La luz ya no se cuela por el centro, sino por el canto que va quedando
     libre a la derecha: el hueco va de (1-p) a 1, así que su centro está en
     1 - p/2. La mancha del tatami y la sombra del bonsái lo siguen solas. */
  :root{ --lightx: calc(100% - var(--p) * 50%); }
  .floor__light{ left:calc(100% - var(--p) * 100%); right:0; }
  .seam{ left:auto; right:0; margin-left:0; }

  .reveal{ padding:16px clamp(20px, 7vw, 36px); }
  h1{ font-size:clamp(26px, 6vw, 38px); margin-bottom:10px; }
  .lede{ margin-bottom:16px; font-size:14px; line-height:1.55; }
  .field input{ padding:13px 15px; }
  .bonsai img{ height:clamp(84px, 17vh, 160px); }
  .bonsai{ left:6px; }
  .form{ gap:10px; }
  .form .row{ gap:10px; }
  .btn{ padding:13px 16px; }
}

/* Pantallas muy bajas (móvil apaisado, teclado abierto): manda el formulario */
@media (max-height:620px){
  :root{ --floor-h:46px; --frame-top:10px; --cols:6; --rows:2; }
  .bonsai img{ height:clamp(78px, 30vh, 150px); }
  /* Móvil apaisado o teclado abierto: manda el formulario, todo lo demás cede. */
  .lede, .eyebrow{ display:none; }
  h1{ font-size:clamp(18px, 4.2vh, 27px); margin-bottom:9px; }
  .field input{ padding:8px 12px; }
  .form{ gap:6px; }
  .form .row{ gap:6px; }
  .btn{ margin-top:3px; padding:10px 14px; font-size:14px; }
  .reveal{ padding:6px 12px; }
}

@media (prefers-reduced-motion: reduce){
  .motes{ display:none; }
  .hint__dot{ animation:none; }
  .garden{ transform:none; }
}

/* Placas ligeras en móvil (mitad de resolución, misma composición) */
@media (max-width:700px){
  .garden{ background-image:url('../assets/jardin-sm.jpg'); }
  .bonsai img{ content:url('../assets/bonsai-sm.png'); }
  .bonsai__shade{
    -webkit-mask-image:url('../assets/bonsai-sm.png');
            mask-image:url('../assets/bonsai-sm.png');
  }
  .panel__glass{ background-image:url('../assets/jardin-difuso-sm.jpg'); }
}