/* Light YouTube-inspired theme for Country Tube */
/* Primary palette: YouTube red accent, light surfaces for readability */
:root{
  --bg: #f7f7f7; /* page background: light neutral */
  --panel-bg: #ffffff;
  --surface: #ffffff; /* card & panel surfaces */
  --card-bg: #ffffff;
  --accent: #FF0000; /* YouTube red */
  --accent-2: #cc0000;
  --muted: #6b7280; /* slightly darker muted text */
  --glass: rgba(0,0,0,0.04);
  --control-bg: rgba(0,0,0,0.04);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color-scheme: light;
  color: #0f172a;
}

/* Header: light bar with red accent brand */
#topbar{
  position:fixed;
  left:0;
  right:0;
  top:0;
  height:64px;
  z-index:10030;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 16px;
  background: linear-gradient(180deg, #ffffff, #fbfbfb);
  border-bottom:1px solid rgba(15,23,42,0.06);
  box-shadow: 0 6px 18px rgba(15,23,42,0.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color:var(--muted);
}

/* header internal layout */
#topbar .left, #topbar .center, #topbar .right{
  display:flex;
  align-items:center;
  gap:10px;
}
#topbar .left{ flex:1; min-width:0; }
#topbar .center{ flex:1; justify-content:center; }
#topbar .right{ flex:0; }

/* brand: red play icon + dark text */
.brand{
  display:flex;
  gap:8px;
  align-items:center;
  color:#0f172a;
  font-weight:700;
  background:transparent;
  padding:6px 10px;
  border-radius:8px;
}
.brand svg{ fill:var(--accent); width:20px;height:20px; }
.brand .brand-name{ color:#0f172a; font-size:15px; margin-left:4px; }

/* icon buttons: light controls */
.icon-btn{
  width:40px;height:40px;border-radius:10px;border:1px solid rgba(15,23,42,0.04);background:var(--control-bg);
  display:inline-flex;align-items:center;justify-content:center;color:#0f172a;font-weight:600;
  transition: transform .12s ease, box-shadow .12s ease;
}
.icon-btn:hover{ transform: translateY(-3px); box-shadow:0 8px 18px rgba(15,23,42,0.06); }

/* global search: subtle input on light header with red search button */
#global-search{ display:flex; gap:8px; align-items:center; width:100%; max-width:560px; }
#global-search input[type="search"]{
  flex:1; padding:10px 12px; border-radius:20px; border:1px solid rgba(15,23,42,0.06);
  background:#fff; color:#0f172a; font-size:14px;
  box-shadow: inset 0 1px 0 rgba(15,23,42,0.02);
}
#global-search button{
  width:44px;height:44px;border-radius:12px;border:0;background:linear-gradient(180deg,var(--accent),var(--accent-2)); color:white;
  display:inline-flex;align-items:center;justify-content:center;
}

/* Side menu: light panel sliding from left */
#side-menu{
  position:fixed;
  left:0;
  top:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  z-index:10035;
  background: linear-gradient(180deg, #ffffff, #fafafa);
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.22,.9,.3,1), opacity .24s ease;
  overflow:auto;
  display:flex;
  flex-direction:column;
  pointer-events:auto;
  padding:18px 16px;
  color:var(--muted);
}
#side-menu.open{ transform: translateX(0%); }

/* side content */
.side-inner{ padding:12px; display:flex; flex-direction:column; gap:10px; height:100%; }
.side-header{ display:flex; align-items:center; justify-content:space-between; color:#0f172a; }
.side-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.side-list button{
  text-align:left; padding:10px 12px; border-radius:8px; border:0; background:transparent; font-weight:600; color:var(--muted); cursor:pointer;
}
.side-list button:hover{ background:rgba(15,23,42,0.02); color:#0f172a; }

/* global layout */
/* Keep page full-height but position the map under the fixed header so content isn't obscured.
   The header height is 64px; the map is fixed to start just below it. */
html,body{height:100%;margin:0;padding:0;background:var(--bg);}

/* Make the map occupy the area below the topbar so nothing is cut off by the fixed header */
#map{
  position:fixed;
  top:64px;
  left:0;
  right:0;
  bottom:0;
  z-index:1;
  background:var(--bg);
}

/* hero: subtle light strip with contrast */
#hero{
  position:fixed;
  left:0;
  right:0;
  top:72px;
  z-index:9995;
  background: linear-gradient(90deg, rgba(15,23,42,0.02), rgba(15,23,42,0.01));
  padding:12px 20px;
  border-radius:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  pointer-events:none;
  max-height:84px;
  overflow:hidden;
}
#hero h2{margin:0;font-size:15px;font-weight:700;color:#0f172a}
#hero p{margin:0;font-size:13px;color:var(--muted)}

/* panels: white surfaces with soft shadows */
#country-panel{
  position:fixed;
  left:0;
  right:0;
  top: 64px;
  bottom:0;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.98));
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px;
  padding-top: calc(8px + env(safe-area-inset-top));
  box-sizing:border-box;
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.22,.9,.3,1), box-shadow .28s ease;
  z-index:10005;
  pointer-events:auto;
  border-top:1px solid rgba(15,23,42,0.04);
  box-shadow: 0 8px 30px rgba(15,23,42,0.04);
}

/* backdrop: lighter overlay */
#backdrop{
  position:fixed;
  inset:0;
  z-index:10002;
  background: rgba(15,23,42,0.08);
  opacity:0;
  pointer-events:none;
  transition: opacity .28s cubic-bezier(.22,.9,.3,1);
}
#backdrop.visible{ opacity:1; pointer-events:auto; }

/* planner panel consistent style */
/* Planner panel: compact header, greedy scroll area, touch-friendly controls */
#planner-panel{
  position:fixed;
  left:0;
  right:0;
  top: 64px;
  bottom:0;
  z-index:10006;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  padding-top: calc(10px + env(safe-area-inset-top));
  box-sizing:border-box;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.22,.9,.3,1);
  background: linear-gradient(180deg, #ffffff, #fbfbfb);
  pointer-events:auto;
  border-top:1px solid rgba(15,23,42,0.04);
  /* ensure full-height panel with an internal scroll container for content */
  min-height: calc(100vh - (env(safe-area-inset-top) + 72px));
}

/* make planner content flow inside a scrollable area for one-screen UX */
#planner-panel .planner-body{
  flex:1 1 auto;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding-right:6px;
  padding-left:6px;
  gap:12px;
}

/* larger, tappable controls */
#planner-panel .planner-row{ gap:10px; align-items:flex-start; }
#planner-panel label{ min-width:110px; font-size:14px; color:var(--muted); }

#planner-panel #planner-category{
  width:100%;
  min-height:96px;
  border-radius:10px;
  padding:8px;
  box-sizing:border-box;
}

/* ensure planner lists are fully scrollable and show pills in wrap */
.planner-list{ max-height:220px; overflow:auto; padding:10px; gap:8px; }

.planner-list .pill{ padding:8px 10px; font-size:14px; }

.planner-schedule-controls{ gap:10px; align-items:center; }

.planner-actions{ gap:8px; justify-content:flex-end; padding-top:6px; }

/* make action buttons full-width on small devices for touch comfort */
@media (max-width:520px){
  .planner-actions{ flex-direction:column; align-items:stretch; }
  .planner-actions .open-btn, .planner-actions .muted-btn{ width:100%; padding:12px; font-size:16px; border-radius:12px; }
  #planner-panel .planner-row{ flex-direction:column; align-items:stretch; }
  #planner-panel label{ min-width:0; }
}

/* improve seen chooser touch targets */
.seen-chooser-body label{ padding:10px; border:1px solid rgba(15,23,42,0.03); border-radius:10px; }

/* make planner close button sit above content without overlapping controls */
#planner-panel #close-planner{ position:absolute; right:12px; top:12px; z-index:10; }
#country-panel.open{ transform: translateY(0%); }
#planner-panel.open{ transform: translateY(0%); }

/* panel header text */
.panel-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; color:#0f172a; }
.country-title h1{ margin:0; font-size:20px; font-weight:700; color:#0f172a; }
.country-title p{ margin:0; font-size:13px; color:var(--muted) }

/* country info: light chips for flag and meta */
#country-info{
  margin-top:8px;
  display:flex;
  gap:10px;
  align-items:center;
  font-size:13px;
  color:var(--muted);
  flex-wrap:wrap;
}
#country-info .flag{
  width:36px;
  height:24px;
  border-radius:4px;
  overflow:hidden;
  background:var(--surface);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 6px rgba(15,23,42,0.06);
  flex-shrink:0;
}
#country-info .meta{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
#country-info .meta span{
  display:inline-flex; gap:6px; align-items:center; background:rgba(15,23,42,0.03);
  padding:6px 8px; border-radius:8px; color:#0f172a; font-weight:600;
}

/* preview box: white card for country shape */
.panel-preview{
  width:84px;
  height:64px;
  border-radius:10px;
  background:var(--surface);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(15,23,42,0.06);
  flex-shrink:0;
  overflow:hidden;
  padding:6px;
  border:1px solid rgba(15,23,42,0.04);
  transition: transform .18s ease, box-shadow .18s ease;
}
.panel-preview:hover{ transform: translateY(-4px) scale(1.02); }

/* preview svg sizing */
.panel-preview svg{ width:100%; height:100%; display:block; }

/* map feature accent uses YouTube red (or a visible blue for borders) */
.leaflet-interactive.country-highlight{ transition: stroke-opacity 240ms ease, stroke-width 240ms ease; cursor:pointer; }

/* ensure visible outline for features */
.leaflet-overlay-pane svg path, .leaflet-interactive {
  stroke-opacity: 0.95 !important;
  stroke-width: 2px !important;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* hover state uses red accent */
.leaflet-interactive:hover{
  stroke: var(--accent) !important;
  stroke-width: 3.4px !important;
  stroke-opacity: 1 !important;
  fill-opacity: 0.08 !important;
}

/* pulse animation uses red */
@keyframes pulseBorder {
  0% { stroke-opacity: 0.18; stroke-width:1; }
  50% { stroke-opacity: 0.95; stroke-width:6; }
  100% { stroke-opacity: 0.95; stroke-width:3; }
}
.country-pulse { animation: pulseBorder 420ms cubic-bezier(.22,.9,.3,1); }

/* drag-and-drop visuals for category cards */
.cat.drag-over{ transform: translateY(-4px) scale(1.01); box-shadow: 0 28px 48px rgba(15,23,42,0.08); border: 1px dashed rgba(15,23,42,0.06); }
.cat.dragging{ opacity: 0.5; transform: scale(0.98); }
.drag-handle{ cursor:grab; user-select:none; font-size:18px; padding:2px 6px; color:var(--muted); }
.drag-handle:active{ cursor:grabbing; }

/* responsive layout */
@media (min-width:700px){
  .panel-header{ align-items:center; gap:16px; }
  .panel-preview{ width:110px;height:80px; }
  #categories{grid-template-columns:repeat(3,1fr);max-width:1100px;margin:0 auto;}
  .country-title h1{font-size:24px}
}

/* close button: subtle light with hover red tint — integrated into panel actions (non-overlay) */
#close-panel{
  width:44px;
  height:44px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,0.04);
  background:rgba(255,255,255,0.9);
  color:#0f172a;
  font-size:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: transform .12s ease, background-color .12s ease;
  margin-right:8px; /* spacing from other action buttons */
}
#close-panel:hover{ transform: translateY(-3px) scale(1.03); background: rgba(255,240,240,0.98); color:#0f172a; }

/* action buttons: red primary like YouTube subscribe CTA */
.panel-actions button, #open-top3{
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  border:0;color:#fff;padding:8px 12px;border-radius:10px;font-weight:700;
  box-shadow:0 8px 20px rgba(15,23,42,0.06);
  transition: transform .12s cubic-bezier(.22,.9,.3,1), box-shadow .12s ease;
}
.panel-actions button:hover, #open-top3:hover{ transform: translateY(-3px) scale(1.02); box-shadow:0 14px 34px rgba(15,23,42,0.08); }

/* categories grid: cards on light background */
#categories{
  margin-top:6px;
  display:grid;
  /* make setcard area take remaining vertical space in the panel so cards can fill and scroll */
  flex: 1 1 auto;
  /* stack cards vertically: single column layout for clearer, scrollable setcards */
  grid-template-columns: 1fr;
  gap:12px;
  align-content:start;
  overflow:auto;
  padding-bottom:10px;
  padding-top:2px;
}

/* small toolbar attached to the categories table for collapse/settings */
.cat-table-toolbar{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  margin-bottom:8px;
}
.cat-table-toolbar button{
  background:transparent;border:1px solid rgba(15,23,42,0.06);padding:6px 8px;border-radius:8px;font-weight:700;color:var(--muted);cursor:pointer;
}
.cat-table-toolbar button:hover{ background: rgba(15,23,42,0.02); color:#0f172a; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,23,42,0.04); }

/* collapsed state for the category overview table: minimized on startup */
.cat-table.collapsed{ max-height: 0; overflow: hidden; transition: max-height .28s ease, opacity .22s ease; opacity: 0; padding: 0; margin-top:0; }
.cat-table.collapsed table{ display:none; }

/* expanded state: smooth open */
.cat-table{ transition: max-height .32s ease, opacity .22s ease; opacity:1; max-height: 360px; }

/* category card tweaked to light YouTube style */
.cat{
  background:var(--surface);
  border-radius:14px;
  padding:12px;
  box-shadow: 0 8px 18px rgba(15,23,42,0.04);
  display:flex;
  gap:12px;
  align-items:center;
  min-height:88px;
  transition: transform .14s cubic-bezier(.22,.9,.3,1), box-shadow .14s ease;
}
.cat:hover{ transform: translateY(-6px); box-shadow: 0 22px 34px rgba(15,23,42,0.06); }
.cat .meta{flex:1;display:flex;flex-direction:column;gap:6px}
.cat h3{margin:0;font-size:15px;color:#0f172a}
.cat p{margin:0;color:var(--muted);font-size:12px}
.cat .preview{
  width:120px;height:68px;border-radius:8px;background:#f3f4f6;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;overflow:hidden;position:relative;
  transition: transform .18s ease, box-shadow .18s ease;
}
.cat .preview:hover{ transform: scale(1.02); box-shadow: 0 10px 22px rgba(15,23,42,0.04); }
.cat .preview .icon{
  width:36px;height:36px;border-radius:8px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff;
}
.cat .controls{display:flex;gap:8px;align-items:center}
.cat button{ background:transparent;border:0;padding:6px 10px;border-radius:8px;font-weight:700;color:var(--accent); cursor:pointer; }
.open-btn{ background: linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff; padding:8px 10px; border-radius:8px; border:0; font-weight:700; }

/* inputs focus: red glow */
input[type="text"], select, input[type="date"], input[type="number"]{
  transition: box-shadow .12s ease, transform .08s ease, border-color .12s ease;
  background:#fff; color:#0f172a; border:1px solid rgba(15,23,42,0.06); border-radius:8px; padding:8px;
}
input[type="text"]:focus, input[type="date"]:focus, input[type="number"]:focus, select:focus{
  outline: none;
  box-shadow: 0 8px 30px rgba(255,0,0,0.08);
  transform: translateY(-2px);
  border-color: rgba(255,0,0,0.12);
}

/* panel footer */
#panel-footer{ margin-top:auto; text-align:center; padding-bottom:6px; color:var(--muted); font-size:12px; }

/* floating hint */
.leaflet-control.custom-hint{
  background:rgba(255,255,255,0.96);
  border-radius:8px;
  padding:6px 8px;
  font-size:13px;
  box-shadow:0 6px 18px rgba(15,23,42,0.06);
  color:#0f172a;
}

/* planner styles adjusted for light surfaces */
#planner-panel .planner-header h2{margin:0;font-size:18px;color:#0f172a}
#planner-panel .muted{color:var(--muted);font-size:13px;margin:2px 0 8px 0}
#planner-panel #close-planner{ position:absolute;right:12px;top:12px;width:44px;height:44px;border-radius:10px;border:1px solid rgba(15,23,42,0.04);background:#fff; color:#0f172a; }

/* planner rows and lists */
.planner-body{display:flex;flex-direction:column;gap:12px;overflow:auto;padding-bottom:8px}
.planner-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.planner-row label{font-size:13px;color:var(--muted);min-width:120px}
.planner-row select, .planner-row input[type="date"], .planner-row input[type="number"]{ padding:8px;border-radius:8px;border:1px solid rgba(15,23,42,0.06);font-size:14px;background:#fff;color:#0f172a; }

.planner-list{min-height:56px;padding:8px;border-radius:10px;background:#fff;box-shadow:0 8px 26px rgba(15,23,42,0.04);color:var(--muted);display:flex;flex-direction:column;gap:6px;overflow:auto}

.planner-list .pill{display:inline-flex;gap:8px;align-items:center;padding:6px 8px;border-radius:999px;background:rgba(255,0,0,0.06);font-weight:700;color:#0f172a}
.planner-list .pill .remove{background:transparent;border:0;color:rgba(15,23,42,0.6);margin-left:6px;cursor:pointer}

.planner-schedule-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.planner-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.muted-btn{background:transparent;border:0;color:var(--muted);padding:8px 12px;border-radius:8px;cursor:pointer}

/* preview svg fit */
.panel-preview svg{ width:100%; height:100%; display:block; object-fit:contain; }

/* table styles use white surfaces */
.cat-table{ margin-top:12px; max-width:1100px; margin-left:auto; margin-right:auto; padding:6px; }
.cat-table table{ width:100%; border-collapse:collapse; background:var(--surface); border-radius:10px; overflow:hidden; box-shadow:0 20px 40px rgba(15,23,42,0.04); }
.cat-table table thead th{ text-align:left; padding:10px 12px; font-size:13px; color:#0f172a; border-bottom:1px solid rgba(15,23,42,0.06); }
.cat-table table tbody td{ padding:10px 12px; font-size:13px; color:var(--muted); border-top:1px solid rgba(15,23,42,0.02); }
.cat-table table tbody tr td:last-child{ text-align:right; }

/* seen chooser modal */
.seen-chooser-inner{ width:100%; max-width:760px; background:var(--surface); border-radius:12px; box-shadow:0 30px 80px rgba(15,23,42,0.06); padding:12px; display:flex; flex-direction:column; gap:8px; color:#0f172a; }
.seen-chooser-body{ max-height:240px; overflow:auto; display:flex; flex-direction:column; gap:8px; padding:6px; border-radius:8px; background:#fff; }
.seen-chooser-body label{ display:flex; align-items:center; gap:8px; padding:8px; border-radius:8px; cursor:pointer; }

/* footer: light sticky with subtle red link */
#site-footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:10040;
  background: linear-gradient(180deg, #ffffff, #fbfbfb);
  border-top:1px solid rgba(15,23,42,0.04);
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 -8px 18px rgba(15,23,42,0.03);
  pointer-events:auto;
  font-size:13px;
  color:var(--muted);
}
#site-footer .footer-inner{ max-width:1100px; width:100%; display:flex; justify-content:center; gap:8px; align-items:center; }
#site-footer a{ color:var(--accent); font-weight:700; text-decoration:none; }
#site-footer a:hover{ text-decoration:underline; }

/* spacing safe area */
body{ padding-bottom: env(safe-area-inset-bottom, 12px); }

/* Project modal (three-dots menu) */
.project-modal{
  position:fixed;
  inset:0;
  /* hidden by default to avoid showing at startup; shown only when aria-hidden is false */
  display:none;
  align-items:flex-end;
  justify-content:center;
  z-index:10060;
  pointer-events:none;
}
.project-modal[aria-hidden="false"]{
  display:flex;
  pointer-events:auto;
}
/* Inner card: slightly larger padding, increased type scale and clearer spacing */
.project-modal-inner{
  width:100%;
  max-width:720px;
  background:var(--surface);
  border-radius:14px 14px 8px 8px;
  margin:84px 12px 84px;
  box-shadow:0 30px 70px rgba(15,23,42,0.12);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  font-size:15px; /* base text slightly larger */
  line-height:1.35;
  color:#0f172a;
}
/* header and tabs: clearer arrangement, larger tappable tabs */
.project-modal-header{ display:flex;justify-content:space-between;align-items:center;color:#0f172a; gap:12px; }
.project-tabs{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.project-tab{
  padding:10px 14px;
  border-radius:12px;
  background:transparent;
  border:1px solid rgba(15,23,42,0.06);
  cursor:pointer;
  font-weight:800;
  color:var(--muted);
  font-size:15px;
  min-height:48px;
}
.project-tab.active{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#fff;
  border-color:transparent;
  box-shadow:0 10px 28px rgba(15,23,42,0.06);
}
.project-panel{ padding:8px; font-size:15px; }

/* Export panel visibility helper remains */
#project-panel-export { display:block; }
#project-panel-export[hidden] { display:none; }

/* ensure modal controls are large enough for touch */
#export-settings, .project-tab, .icon-btn, .muted-btn{ min-height:48px; font-size:15px; }

/* Return-from-YouTube overlay styles */
#yt-return-overlay{
  position:fixed;
  right:18px;
  bottom:84px;
  z-index:10070;
  display:none;
  pointer-events:auto;
}
#yt-return-overlay.visible{ display:block; animation: ytOverlayIn 360ms cubic-bezier(.22,.9,.3,1); }
.yt-bubble{
  background: linear-gradient(180deg,#fff,#fff);
  border-radius:14px;
  padding:12px 14px;
  box-shadow: 0 18px 36px rgba(15,23,42,0.12);
  max-width:280px;
  color:#0f172a;
  display:flex;
  gap:8px;
  align-items:center;
  transform-origin:100% 100%;
  border:1px solid rgba(15,23,42,0.06);
}
.yt-bubble-text{ font-size:13px; line-height:1.25; color:var(--muted); }
.yt-bubble-text strong{ color:#0f172a; font-weight:800; }
.yt-bubble-close{
  margin-left:auto;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#fff;
  border:0;
  padding:8px 10px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(15,23,42,0.08);
  min-width:72px;
}
@keyframes ytOverlayIn{
  0%{ transform: translateY(12px) scale(.96); opacity:0 }
  60%{ transform: translateY(-6px) scale(1.02); opacity:1 }
  100%{ transform: translateY(0) scale(1); opacity:1 }
}