/* CASINO logo spin: fruit-machine symbols (watermelon-heavy) + jackpot every 3rd click of the logo.
   Hooked in by the footer slot script via window.CSF (each reel cell) and window.CSJ (end of spin). */
(function () {
  var O = 'stroke="#111" stroke-width="1.8" stroke-linejoin="round"', LF = '#5cb84a';
  function sh(x, y, r) { r = r || 3; return '<ellipse cx="' + x + '" cy="' + y + '" rx="' + r + '" ry="' + (r * .6) + '" fill="#fff" opacity=".8" transform="rotate(-25 ' + x + ' ' + y + ')"/>'; }
  function lf(x, y, a) { return '<path d="M0 0 Q6 -7 13 -3 Q7 4 0 0Z" fill="' + LF + '" ' + O + ' transform="translate(' + x + ' ' + y + ') rotate(' + a + ')"/>'; }
  function svg(b) { return '<svg viewBox="0 0 40 40" width="100%" height="100%" style="display:block">' + b + '</svg>'; }
  var Y = {
    melon: svg('<path d="M4 22 L36 6 Q40 26 22 32 Q10 35 4 22Z" fill="#5cb84a" ' + O + '/><path d="M8 22 L34 9 Q36 25 21 29 Q12 31 8 22Z" fill="#e3263a"/>' +
      [[16, 22], [21, 19], [26, 16], [19, 25], [25, 22], [29, 19]].map(function (p) { return '<ellipse cx="' + p[0] + '" cy="' + p[1] + '" rx="1" ry="1.6" fill="#111"/>'; }).join('')),
    apple: svg('<circle cx="20" cy="24" r="12.5" fill="#e3263a" ' + O + '/>' + sh(14, 18) + lf(19, 11, -160) + lf(20, 11, -20)),
    heart: svg('<path d="M20 34 L7 21 C2 15 5 6 12 6 C16 6 19 9 20 12 C21 9 24 6 28 6 C35 6 38 15 33 21Z" fill="#e3263a" ' + O + '/>' + sh(11, 12)),
    cherries: svg('<path d="M20 10 L14 24 M20 10 L27 22" stroke="#111" stroke-width="1.6" fill="none"/>' + lf(20, 10, -150) + lf(20, 10, -30) +
      '<circle cx="12" cy="27" r="6" fill="#d61f35" ' + O + '/><circle cx="27" cy="25" r="6" fill="#d61f35" ' + O + '/><circle cx="20" cy="32" r="6" fill="#d61f35" ' + O + '/>' + sh(10, 25, 1.8) + sh(25, 23, 1.8) + sh(18, 30, 1.8)),
    bar: svg('<rect x="2" y="11" width="36" height="18" fill="#111"/><rect x="4.5" y="13.5" width="31" height="13" fill="none" stroke="#f2c230" stroke-width="1.4"/><text x="20" y="25" text-anchor="middle" font-family="Georgia,serif" font-weight="900" font-size="12" fill="#fff">BAR</text>'),
    bell: svg('<circle cx="20" cy="33" r="3.5" fill="#f2c230" ' + O + '/><path d="M20 4 C13 4 11.5 12 11.5 20 Q11 26 6 29 Q5 31 8 31 H32 Q35 31 34 29 Q29 26 28.5 20 C28.5 12 27 4 20 4Z" fill="#f2c230" ' + O + '/>' + sh(15, 13, 2.4)),
    seven: svg('<path d="M9 6 H33 Q35 6 34 9 Q24 18 20 34 Q19 36 16 35 L13 34 Q12 33 13 31 Q17 19 25 12 H11 Q8 12 8 9 Q8 6 9 6Z" fill="#f39a1e" ' + O + '/>'),
    grapes: svg(lf(20, 8, -150) + lf(20, 8, -30) + [[12, 15], [20, 15], [28, 15], [16, 22], [24, 22], [20, 29]].map(function (p) { return '<circle cx="' + p[0] + '" cy="' + p[1] + '" r="5" fill="#8b64d4" ' + O + '/>' + sh(p[0] - 1.6, p[1] - 1.6, 1.5); }).join(''))
  };
  var OTHERS = ['cherries', 'bell', 'seven', 'bar', 'grapes', 'heart', 'apple'];
  var SS = {};
  try { SS = sessionStorage; } catch (e) {}
  // Count clicks on the logo; every 3rd click's spin is a jackpot
  document.addEventListener('click', function (ev) {
    if (ev.target.closest && ev.target.closest('.brand-img')) {
      try { SS.casN = (+SS.casN || 0) + 1; } catch (e) {}
    }
  }, true);
  var n = +SS.casN || 0, J = n > 0 && n % 3 === 0 && SS.casJ != n;
  if (J) { try { SS.casJ = n; } catch (e) {} }

  // e = reel cell, k = position index, f = symbol size in px, r = row (0 = the landing row)
  window.CSF = function (e, k, f, r) {
    if (!r) {
      if (!J) return; // normal spin lands on the CASINO letters
      e.style.background = 'none';
      e.style.display = 'flex'; e.style.alignItems = 'center'; e.style.justifyContent = 'center';
      e.innerHTML = '<div class="cs-jm" style="width:92%;height:92%;max-width:' + Math.round(f * 1.05) + 'px">' + Y.melon + '</div>';
      return;
    }
    var nm = Math.random() < 0.55 ? 'melon' : OTHERS[Math.floor(Math.random() * OTHERS.length)];
    var s = Math.round(f * 1.05);
    e.innerHTML = '<div style="width:' + s + 'px;height:' + s + 'px">' + Y[nm] + '</div>';
  };

  // Called when the spin is set up; returns extra ms to hold before the logo comes back
  window.CSJ = function (W, T) {
    if (!J) return 0;
    // Same-size melons on every reel: reels clip top/bottom only, so the narrow I melon can spill sideways
    var z = Math.round(W.offsetHeight * .72);
    [].forEach.call(W.children, function (c) { c.style.overflow = 'visible'; c.style.clipPath = 'inset(0 -60px)'; });
    // ...and evenly spaced across the logo (the reels themselves are uneven widths)
    var ww = W.offsetWidth;
    [].forEach.call(W.children, function (c, i) {
      var m = c.querySelector('.cs-jm'); if (!m) return;
      var dx = Math.round(ww * (i + .5) / 6 - (c.offsetLeft + c.offsetWidth / 2));
      m.style.cssText = 'width:' + z + 'px;height:' + z + 'px;flex:none;position:relative;left:' + dx + 'px';
    });
    setTimeout(function () { jackpot(W); }, T);
    return 3200;
  };

  var COIN = '<svg viewBox="0 0 40 40" width="100%" height="100%"><circle cx="20" cy="20" r="16" fill="#f2c230" stroke="#111" stroke-width="2"/><circle cx="20" cy="20" r="11" fill="none" stroke="#c9961a" stroke-width="2"/>' + sh(13, 13, 3) + '</svg>';

  function jackpot(W) {
    if (!W.animate) return;
    // Reels bounce one after another
    [].forEach.call(W.querySelectorAll('.cs-jm'), function (m, i) {
      m.animate([{ transform: 'scale(1)' }, { transform: 'scale(1.35) rotate(-8deg)' }, { transform: 'scale(.9) rotate(6deg)' }, { transform: 'scale(1.15)' }, { transform: 'scale(1)' }],
        { duration: 700, delay: i * 90, iterations: 3, easing: 'ease-in-out' });
    });
    var b = W.getBoundingClientRect(), cx = b.left + b.width / 2, cy = b.top + b.height / 2;
    var L = document.createElement('div');
    L.style.cssText = 'position:fixed;inset:0;pointer-events:none;z-index:10000;overflow:hidden';
    // JACKPOT banner
    var t = document.createElement('div');
    t.textContent = 'JACKPOT!';
    t.style.cssText = 'position:absolute;left:' + cx + 'px;top:' + (b.bottom + 6) + 'px;transform:translateX(-50%);font:900 ' + Math.max(22, b.height * .55) + 'px/1 Arial Black,Arial,sans-serif;color:#d4111b;letter-spacing:.04em;white-space:nowrap;-webkit-text-stroke:1.5px #111';
    L.appendChild(t);
    t.animate([{ transform: 'translateX(-50%) scale(0)', opacity: 0 }, { transform: 'translateX(-50%) scale(1.25)', opacity: 1, offset: .15 },
      { transform: 'translateX(-50%) scale(1)', opacity: 1, offset: .25 }, { color: '#f2c230', offset: .4 }, { color: '#d4111b', offset: .55 },
      { color: '#f2c230', offset: .7 }, { transform: 'translateX(-50%) scale(1)', opacity: 1, offset: .88 }, { transform: 'translateX(-50%) scale(.6)', opacity: 0 }],
      { duration: 3100, fill: 'forwards' });
    // Shower of coins and watermelons
    var count = innerWidth < 700 ? 26 : 44;
    for (var i = 0; i < count; i++) {
      var p = document.createElement('div'), z = 18 + Math.random() * 22;
      p.innerHTML = Math.random() < .6 ? COIN : Y.melon;
      p.style.cssText = 'position:absolute;left:' + (cx - z / 2) + 'px;top:' + (cy - z / 2) + 'px;width:' + z + 'px;height:' + z + 'px';
      L.appendChild(p);
      var dx = (Math.random() - .5) * innerWidth * .9, up = -(80 + Math.random() * 220), down = innerHeight - cy + 60, rot = (Math.random() - .5) * 900;
      p.animate([{ transform: 'translate(0,0) rotate(0)', opacity: 1 },
        { transform: 'translate(' + dx * .5 + 'px,' + up + 'px) rotate(' + rot * .4 + 'deg)', opacity: 1, offset: .35, easing: 'ease-in' },
        { transform: 'translate(' + dx + 'px,' + down + 'px) rotate(' + rot + 'deg)', opacity: 1 }],
        { duration: 1800 + Math.random() * 1200, delay: Math.random() * 500, easing: 'cubic-bezier(.2,.7,.4,1)', fill: 'both' });
    }
    document.body.appendChild(L);
    setTimeout(function () { L.remove(); }, 3800);
  }
})();

/* Phones/tablets (no hover): show project titles under each tile instead of on hover */
(function () {
  var st = document.createElement('style');
  st.textContent = '@media (hover: none){.col.item .overlay{position:static!important;opacity:1!important;background:none!important;padding:8px 2px 6px!important;height:auto!important;width:auto!important;display:block!important;transform:none!important}.col.item .overlay *{position:static!important;transform:none!important;text-align:left!important}.col.item .overlay strong{color:#000!important}.col.item .overlay .thumbnail-subtitle,.col.item .overlay .thumbnail-subtitle p{color:#777!important;margin:2px 0 0!important}}';
  (document.head || document.documentElement).appendChild(st);
})();